JS 客户端（浏览器）存储数据之 localStorage、sessionStorage和indexDB

基本概念

1、localStorage和sessionStorage是HTML5 Web存储的提供的两种存储方式，在IE7以上以及大多数浏览器都是支持的

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在项目中的实际运用