前端页面之间存取值(Html5之sessionStorage、localStorage)

前端页面之间存取值(Html5之sessionStorage、localStorage)

最近在做项目的时候，遇见一些问题：我在后台取到数据之后，需要把这些数据在N个页面中进行使用，如果每次都要去服务器查找数据，那么就会给服务器带来很大的压力。为了避免重复取带来的压力，遂把数据保存在前端页面中。每次需要取值的时候，只需要在前端页面中取值，而不必去后台服务器中查询数据，那么具体是存在哪里呢？我这里是保存在Html5的web storage，Html5中具有sessionStorage和localStorage两个存储域。

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并
且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。

除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。

但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在，而Web Storage仅仅是为了在本地“存储”数据而生。

在使用web storage时，我们需要判断浏览器是否支持。通过下面的代码即可判断

if(window.localStorage||typeof window.localStorage != 'undefined'),只要这两个条件中满足其中
之一，那么这个浏览器就是支持localStorage的，我们就可以把数据存储在这里面，然后在其他页面取数据

具体的操作方式

存数据：setItem(key,value)
取数据：getItem(key,value)
通过key移出指定的数据：removeItem(key)
清空数据：clear()

除此之外，localStorage和sessionStorage还提供了key和length属性实现遍历

var storage = window.localStorage; 
for (var i=0, len = storage.length; i  <  len; i++){ 
    var key = storage.key(i); 
    var value = storage.getItem(key); 
console.log(key + "=" + value); }