web存储(Web Storage）

概述

  Web Storage的目的是克服由cookie带来的一些限制，当数据需要被严格控制在客户端上时，无须持续地将数据发回服务器。Web Storage的两个主要目标是：提供一种在cookie之外存储会话数据的途径以及提供一种存储大量可以跨会话存在的数据的机制

  Web Storage分成两类：sessionStorage和localStorage。sessionStorage保存的数据用于浏览器的一次会话，当会话结束(通常是该窗口关闭)，数据被清空；localStorage保存的数据长期存在，下一次访问该网站的时候，网页可以直接读取以前保存的数据。除了保存期限的长短不同，这两个对象的属性和方法完全一样

  它们很像cookie机制的强化版，能够动用大得多的存储空间。目前，每个域名的存储上限视浏览器而定，Chrome是2.5MB，Firefox和Opera是5MB，IE是10MB。其中，Firefox的存储空间由一级域名决定，而其他浏览器没有这个限制。也就是说，在Firefox中，a.example.com和b.example.com共享5MB的存储空间。另外，与Cookie一样，它们也受同域限制。某个网页存入的数据，只有同域下的网页才能读取

  通过检查window对象是否包含sessionStorage和localStorage属性，可以确定浏览器是否支持这两个对象

  注意：IE浏览器不支持在本地使用storage

存取数据

  sessionStorage和localStorage保存的数据，都以“键对”的形式存在。也就是说，每一项数据都有一个键名和对应的值。所有的数据都是以文本格式保存

  注意：Storage类型只能存储字符串。非字符串的数据在存储之前会被转换成字符串

丨setItem()

  存入数据使用setItem方法。它接受两个参数，第一个是键名，第二个是保存的数据

  注意：不同的浏览器存入的Storage位置不一样，不能通用

丨getItem()

  读取数据使用getItem方法。它只有一个参数，就是键名

sessionStorage.setItem("key1","value1");
localStorage.setItem("key1","value2");
var valueSession = sessionStorage.getItem("key");
var valueLocal = localStorage.getItem("key");
console.log(valueSession) //value1
console.log(valueLocal) //value2

除了使用setItem()和getItem()方法之外，还可以使用属性来存取数据

sessionStorage.setItem("key1","value1");
localStorage.setItem("key1","value2");
console.log(localStorage.key1)//value1
console.log(localStorage.key2)//value2

清除数据

丨removeItem()

  removeItem()方法用于清除某个键名对应的数据

  注意：清除不存在的键名不会报错，只会静默失败

sessionStorage.removeItem('key');
localStorage.removeItem('key');

  除了使用removeItem()方法，还可以使用delete操作来清除数据

  注意：IE7-浏览器不支持delete操作符来清除storage数据

localStorage.setItem("key1","value1");
delete localStorage.key1;
console.log(localStorage.key1);//undefined
console.log(localStorage.getItem('key1'));//null

丨clear()

  clear方法用于清除所有保存的数据

sessionStorage.clear();
localStorage.clear(); 

遍历操作

丨key()

  key(index)方法返回index位置处的值的名字

sessionStorage.setItem("key1","value1");
sessionStorage.setItem("key2","value2");
console.log(sessionStorage.key(0));//'key1'
console.log(sessionStorage.key(1));//'key2'
console.log(sessionStorage.key(2));//null

丨length

  length属性返回名值对儿的个数

console.log(sessionStorage.length);//2

  利用length属性和key()方法，可以遍历所有的键

for(var i = 0; i < localStorage.length; i++){
    var key = localStorage.key(i);
    var value = localStorage.getItem(key);
}

        还可以使用for-in循环来迭代

for(var key in localStorage){
    var value = localStorage.getItem(key);
}