sessionStorage和localStorage

sessionStorage

可以使用expando属性设置存储器中的值。

sessionStorage.mykey = "22";

sessionStorage['mykey']="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["myStorageKey"])

}

function saveData(){

　　sessionStorage["myStorageKey"] = JSON.stringify(data);

}

window.addEventListener("load",loadData,true);

window.addEventListener("unload",saveData,true);

 

页面每次加载时都会调用loadData()函数，用户每次关闭浏览器或窗口时，都会调用saveData()函数。

 

 

注：如若喜欢，欢迎转载，请在文章页面明显位置给出此文链接！
若您觉得这篇文章还不错请点击下右下角的推荐，有了您的支持才能激发作者更大的写作热情，非常感谢！