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