window.sessionStorage、window.localStorage与cookie总结
前言：最近项目中用到了本地存储和cookie，虽然平时也经常提到，但是在用的时候还是有些模糊，这里做一下总结，以便加深记忆。
Web Storage是为了在本地“存储”数据而生，均不会被发送到服务器端。包括了两种存储方式：sessionStorage和localStorage，这两个对象在支持的浏览器中都是以 window 对象属性的形式存在的。
相同点：
1、仅在客户端中保存，不参与和服务器的通信
2、都有同源策略限制，不同浏览器无法共享localStorage或sessionStorage中的信息
3、存储大小均为5M左右
不同点：
1、生命周期
localStoage：是一种永久性存储，除非手动清除。
sessionStorage：会话存储，存储在 sessionStorage 里面的数据在页面会话结束时会被清除，也就是一旦窗口或者标签页被关闭，那么所有通过 sessionStorage 存储的数据也会被删。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。
2.作用域
localStorage: 在同一个浏览器内，同源文档（页面属于相同域名和端口）之间，即使是不同页面可以共享 localStorage 数据，可以互相读取、覆盖。
sessionStorage: 与 localStorage 一样需要同一浏览器同源文档这一条件。不仅如此，sessionStorage 的作用域还被限定在了窗口中，也就是说，只有同一浏览器、同一窗口的同源文档才能共享数据。
语法：
sessionStorage或localStorage两种存储方式几乎都有相同的方法和属性。
1.localStorage.length 和 sessionStorage.length : 返回本地存储列表长度;需要说明的是可以通过localStorage对象获取对应的存储数据，比如已经存储了一个键为name的数据，使用localStorage.name获取存储数据；下面的方法都是基于localStorage 对象 或 sessionStorage 对象；
2.getItem( keyName )方法：通过键获取存储的数据；
3.setItem( keyName,value )方法：存储数据，keyName为存储数据的键，value实际要存储的数据（可以把keyName理解成 给要存储的数据起的名字，便于管理）；
4.removeItem( keyName )方法： 将指定键名的数据删除；
5.clear() 方法：清空所有的存储数据；
6.key() 方法： 获取键值，需要注意的是并不能返回指定布尔值需要作进一步处理
基本概念
1、cookie 确实非常小，它的大小限制为4KB左右。
2、要表示唯一的一个cookie值需要：name、domain、path
3、一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效。
4、每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题。
cookie的使用
document.cookie，通过该方法可以读取、修改、删除cookie。
sessionStorage 与localStorage 的区别
sessionStorage与localStorage 是H5的新概念，sessionStorage 开启了一个新的概念，会话窗口，当一个窗口关闭后，sessionStorage 也就消失了，不同浏览器打开的同一个页面，sessionStorage 也是不同的，localstora
下面我们来说下localStorage的存，读，删
设置数据：localStorage.setItem(key,value)
读取数据：localStorage.getItem(key)
删除数据：localStorage.removeItem(key,value)
清空全部数据：localStorage.clear()
《div id=“test“》《/div》
《script》
//检查浏览器是否支持storage
if(typeof(Storage)!==’undefined’){
localStorage.setItem(“name“,“mfz“)
document.getElementById(“test“).innerHtml=localStorage.getItem(’name’);
}else{
document.getElementById(“test“).innerHtml=“您的浏览器不支持storage“;
}
《/script》
JS 退出登录，清除localStorage、sessionStorage
localStorage、sessionStorage操作
localStorage PC浏览器（永久保存）
sessionStorage PC浏览器（关闭窗口就删除数据）
操作
1、localStorage.setItem(key,value) 保存数据
2、localStorage.getItem(key) 获取数据
3、localStorage.removeItem(key) 删除数据
4、localStorage.clear(); 删除全部数据
同理 sessionStorage
数据持久化操作(2)localStorage(3)sessionStorage
1.数据本地化localStorage与sessionStorage
描述：在html5中提出了两种“替代”cookie的技巧
为localStorage和sessionStorage
说明：
localStorage是指数据一旦被本地化后，只要用户不主动删除即永远存在
sessionStorage是指数据一旦被本地化后，只要页面不关闭就不主动删除。
而一旦页面关闭后数据即被自动删除。
语法：
写入：xxx.setItem(’key’,’value’);
读取：xxx.getItem(’key’);
删除：xxx.removeItem(’key’);
浏览器怎么清除localstorage
h5本地存储localStorage，sessionStorage。
localStorage是没有失效时间的，sessionStorage的声明周期是浏览器的生命周期。
当浏览器关闭时，sessionStorage的数据将清空，而localStorage数据只要不通过代码特意的删除或手动删除，是永久保存的。
删除方法：localStorage.clear();
sessionstorage对象执行clear方法后
sessionStorage
可以使用expando属性设置存储器中的值。
sessionStorage.mykey = “22“;
sessionStorage=“11“;
sessionStorage设置和获取的调用不必出现在同一个网页中。只要网页是通院的（包括规则、主机和端口），基于相同的键，我们都能够在其他网页中获得设置在sessionStorage上的数据。在对同一页面后续多次加载的情况下也是如此。
sessionStorage数据只要浏览器窗口（或标签）不关闭他们就会一直存在。
注：牢记浏览器有时会重新定义窗口或标签页的生命周期。例如，当浏览器崩溃或用户关闭已打开的多个标签页时，一些浏览器会保存并恢复当前会话。在这些情况下，浏览器在重启或恢复时，可能会选择保存相关的sessionStorage。所以，sessionStorage实际上可能会比你想象的更“长寿”！
HTML5中提供了localStorage对象可以将数据长期保存在客户端，直到人为清除。
localStorage提供了几个方法:
1、存储：localStorage.setItem(key,value)
如果key存在时，更新value
2、获取：localStorage.getItem(key)
如果key不存在返回null
3、删除：localStorage.removeItem(key)
一旦删除，key对应的数据将会全部删除
4、全部清除：localStorage.clear()
某些时候使用removeItem逐个删除太麻烦，可以使用clear,执行的后果是会清除所有localStorage对象保存的数据
5、遍历localStorage存储的key
.length 数据总量，例：localStorage.length
.key(index) 获取key，例：var key=localStorage.key(index);
6、存储JSON格式数据
JSON.stringify(data) 将一个对象转换成JSON格式的数据串,返回转换后的串
JSON.parse(data) 将数据解析成对象，返回解析后的对象
备注：localStorage存数的数据是不能跨浏览器共用的，一个浏览器只能读取各自浏览器的数据,储存空间5M。
添加事件监听器即可接受同源窗口的Storage事件(共享窗口 localStorage有用、sessionStorage不可用)
function displayStorageEvent(e){var logged=“key:“+e.key+“,newVlaue:“+e.newVlaue+“,oldValue:“+e.oldValue+“,url:“+e.url+“,storageArea:“+e.storageArea;alert(logged);}
window.addEventListener(“storage“,displayStorageEvent,true)
JSON对象的存储
var data;
function loadData(){
data = JSON.parse(sessionStorage)
}
function saveData(){
sessionStorage = JSON.stringify(data);
}
window.addEventListener(“load“,loadData,true);
window.addEventListener(“unload“,saveData,true) ;
页面每次加载时都会调用loadData()函数，用户每次关闭浏览器或窗口时，都会调用saveData()函数。
session由服务器端自动创建所以浏览器无法手动无法删除吗
session由服务器端自动创建所以浏览器无法手动无法删除吗对的，是这样的，浏览器呢无法手动，也无法删除。是因为当我们打开他的服务器的一个端的时候，自动创建所带主页面进行一个设置。他的这样的一个程序设置就是这样的
HUAWEI WATCH GT Cyber 闪变换壳手表
拥有六种表壳配色和六大专属主题，满足年轻人的多种穿搭场合，彰显年轻人自由态度。诠释穿搭与使用场景的潮美融合，为经常切换不同场景的时尚潮人提供全新的智能穿戴选择。
session storage怎么清除
能家种式实现,我今给家享纯前端实现
全部代码几行其用两新特性sessionStoragelocalStorage
localStorage用存储用户访问urlsessionStorage变量用判断用户前行新进系统刷新页面
01 if(sessionStorage.opened){
02 console.log(’窗口刷新页面,新打’)
03 }else{
04 console.log(’窗口新打’)
05 //获取历史url,则重定向历史址
06 if(localStorage.history && localStorage.history != window.location.href ){
07 window.location.replace(localStorage.history);
08 }
09 }
10 sessionStorage.setItem(’opened’,’true’);
11 localStorage.setItem(’history’,location.href);
,
session storage可以删除吗
sessionStorage是用来存储客户端临时信息的对象。
它均只能存储字符串类型的对象（虽然规范中可以存储其他原生类型的对象，但是目前为止没有浏览器对其进行实现）。
sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。
不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。
sessionStorage含义及用法
sessionStorage和localStorage一样都是用来存储客户端临时信息的对象。
sessionStorage.getItem(key):获取指定key本地存储的值； sessionStorage.setItem(key,value):将值存储到key字段； sessionStorage.removeItem(key):删除指定key本地存储的值； sessionStorage.length是sessionStorage的项目数