HTML5中的web数据存储

概述

Web Storage分成两类：sessionStorage和localStorage。
sessionStorage：保存的数据用于浏览器的一次会话，当会话结束(通常是该窗口关闭)，数据被清空；
localStorage：保存的数据长期存在，下一次访问该网站的时候，网页可以直接读取以前保存的数据。除了保存期限的长短不同，这两个对象的属性和方法完全一样

它们很像cookie机制的强化版，能够动用大得多的存储空间。目前，每个域名的存储上限视浏览器而定，Chrome是2.5MB，Firefox和Opera是5MB，IE是10MB。其中，Firefox的存储空间由一级域名决定，而其他浏览器没有这个限制。也就是说，在Firefox中，a.example.com和b.example.com共享5MB的存储空间。另外，与Cookie一样，它们也受同域限制。某个网页存入的数据，只有同域下的网页才能读取。

浏览器支持

Internet Explorer 8+, Firefox 3.5+, Opera 10.5+, Chrome 4+, 和 Safari支持Web 存储。

这两个对象的属性和方法完全一样

存取数据

sessionStorage.setItem("key1","value1");
localStorage.setItem("key1","value2");
var valueSession = sessionStorage.getItem("key");
var valueLocal = localStorage.getItem("key");

如果要存储数组或对象，先用 JSON.stringify() 方法转化为字符串再存储；同样读取出来后再用 JSON.parse() 进行解析。

清除数据
removeItem(key)方法清除某一项
clear()方法清除所有保存的数据

sessionStorage.removeItem('key');
localStorage.removeItem('key');
sessionStorage.clear();
localStorage.clear();

遍历操作

• key(index)方法返回index位置处的值的名字

sessionStorage.setItem("key1","value1");
sessionStorage.setItem("key2","value2");
console.log(sessionStorage.key(0));//'key1'
console.log(sessionStorage.key(1));//'key2'
console.log(sessionStorage.key(2));//null

• length属性返回名值对儿的个数

console.log(sessionStorage.length);//2

for(var i = 0; i < localStorage.length; i++){
    var key = localStorage.key(i);
    var value = localStorage.getItem(key);
}

• 还可以使用for-in循环来遍历

for(var key in localStorage){
    var value = localStorage.getItem(key);
}

参考：https://blog.csdn.net/m0_43599959/article/details/98521007?biz_id=102&utm_term=web%E5%AD%98%E5%82%A8&utm_medium=distribute.pc_search_result.none-task-blog-2_allsobaiduweb~default-0-98521007&spm=1018.2118.3001.4187