JS 客户端（浏览器）存储数据之 localStorage、sessionStorage和indexDB
基本概念
1、localStorage和sessionStorage是HTML5 Web存储的提供的两种存储方式，在IE7以上以及大多数浏览器都是支持的
SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。2、localStorage和sessionStorage的区别：
(1)、localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。
(2)、他们都是只能存储字符串类型的对象（虽然规范中可以存储其他原生类型的对象，但是目前为止没有浏览器对其进行实现）。
(3)、localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。（记录在内存中的）
sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被关闭了，那么所有通过sessionStorage存储的数据也就被清空了（回话性质的储存）
(4)、不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。
这里需要注意的是，页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。（同源原则）
3、localStorage和sessionStorage可存储数据的大小一般为5MB
具体使用
localStorage和sessionStorage使用起来具有相同的API，例如setItem、getItem和removeItem等
存储的方式以键值对的形式（key-value）
function testlocalStorage() { var data="my name is Russ"; localStorage.setItem('name',data);//存储key为name的数据data localStorage.getItem('name');//获取key为name的数据--my name is Russ localStorage.removeItem("key");//删除key为name的数据 localStorage.clear()//清空所有localStorage的数据//保存后台返回的JSON对象型的数据 var json_data={ a:'1', b:'2', c:'3' } var dd=JSON.stringify(json_data) //因为目前localStorage保存的数据都是字符串类型的 localStorage.setItem('KEY1',dd) //同理获取的时候字符串转成json对象 var model=JSON.parse(localStorage.getItem('KEY1')) } function testlocalStorage() { var data="my name is Russ"; sessionStorage.setItem('name',data);//存储key为name的数据data sessionStorage.getItem('name');//获取key为name的数据--my name is Russ sessionStorage.removeItem("key");//删除key为name的数据 sessionStorage.clear()//清空所有sessionStorage的数据
//保存后台返回的JSON对象型的数据 var json_data={ a:'1', b:'2', c:'3' } var dd=JSON.stringify(json_data) //因为目前sessionStorage保存的数据都是字符串类型的 sessionStorage.setItem('KEY1',dd) //同理获取的时候字符串转成json对象 var model=JSON.parse(sessionStorage.getItem('KEY1')) } //sessionStorage和localStorage对应的length属性以及提供的key方法可以进行遍历 function forEachStorage(){ var storage = window.localStorage;//window.sessionStorage for(var i=0, len=storage.length; i<len;i++){ var key = storage.key(i);//取到具体key值 var value = storage.getItem(key); //取对应的value值 console.log(key + "=" + value); } }
indexDB应用于web程序中
相信这个链接对我们理解indexDB有很大的帮助（英文的可以借助浏览器帮助翻译一下）
看完后我们进入indexDB在项目中的实际运用
