web存储机制-----localstorage、sessionStorage基本用法等

首先我们要了解web的存储机制：

web storage的两个目标：

1. 提供一种在cookie之外的存储会话数据的途径
2. 提供一种存储大量可以跨会话存在的数据的机制

下面我们进入正题，注意storage类型++只能存储字符串++，不是字符串的在存储之前被转化为字符串。

（1）storage类型

• clear( ):删除所有的值
• getItem(name):根据给定的name获取相应的值
• setItem(name,value ):为指定的属性设置一个值
• removeItem(name):删除由name指定的名值对
• 可以使用length来判断有多少名值对已经存放在了storage对象中

(2) sessionStorage()对象

存储特定于某个会话的数据，该数据只保持到数据库关闭。
它是storage的实例，下面是存储数据的两种方法：

//使用方法存储（推荐使用）
sessionStorage.setItem("name","liming");

//使用方法读取数据
var name = sessionStorage.getItem("name");

//使用属性存储
sessionStorage.book = "CSS权威指南"；

//使用属性读取数据
var book = sessionStorage.book

//删除数据
//删除一个值
delete sessionStorage.name;

//使用方法删除
sessionStorage。removeStorage("book");

tip：IE8的用法因为是异步写入，所以可以强制把数据写入磁盘。

我们也可以使用key()和length属性迭代sessionStorage中的值

for(var i = 0 , len = sessionStorage.length ;  i< len ; i++){

    var key = sessionStorage.key(i);
    
    var value = sessionStorage.getItem(key);
    
    alert(key+"="+value);
}


for(key in sessionStorage){

   var value = sessionStorage.getItem(key);
   
   alert(key + "=" + value);
}

(3)globalStorage对象

这个对象的目的是跨域会话存储数据，但又有特定的访问权限。
要使用的话，首先指定哪些域可以访问该数据。可以使用方括号标记使用属性来实现。
适合在客服端存储文档或者长期保存用户的偏好设置。

//保存数据
globalStorage["wrox.com"].name = "www";

//获取数据
var name = globalStorage["wrox.com"].name;

需要注意：globalStorage不是storage的属性 globalStorage[“wrox.com”]才是，使用的时候一定指定一个域名

如果不能确定域名，那么使用location.host比较安全

(4)localStorage对象

1. 不能给localStorage指定任何的使用规则，规则实现就设定好了，要访问同一个localStorage对象，页面必须来自同一个域名，使用同一个协议，在同一个端口。
2. 是storage的实例，所以和sessionStorage用法相似
3. 据保留到通过JS删除或者用户清楚浏览器缓存

(5)storage事件(对Storage对象修改都会触发）

四个属性：

• domain：发生变化的存储空间的域名
• key:设置或者删除的键名
• newValue:如果是设置值则是新值，如果是删除，则为空
• oldValue:键被更改之前的值

---

因为要存字符串所以要使用

• JSON.stringify()
• JSON.parse()

具体用法这里就不详述了

不正确的地方望指正！