HTML5 web存储

cookie:

特点：通过键值对的形式存储数据。

在本地浏览器上存储数据。

有效期：未来的时间（expires）

存储数据的容量：4kb

所有的http请求都会带上cookie信息，（联想HTTP）

 

(1)localStorage

用法：

1、保存数据：setItem:(key,value):有两个参数，第一个参数存储数据的键名，第二个参数存储数据的值。

localStorage.setItem("user",username);

2、删除数据：根据指定键名删除数据。

localStorage.removeItem("user");//删除指定的key的内容

清除数据：清除所有存储在localStorage的数据。

localStorage.clear();//删除所有的key的内容

 

3、获取数据：只有一个参数，该参数是获取数据的键名

localStorage.getItem("age");

注意点：key写具体的时候，要加””.

localStorage 存储的数据没有时间的限制。

（2）sessionStorage

用法和localStorage一样，不同的是：sessionStorage存储数据的有效期仅对当前的浏览器（页面）有效，一旦关闭，之前存储的内容就没有了。

（3）存储对象

JSON.parse():将字符串转成对象

JSON.stringify();将对象转成字符串

解决问题：

（1）localStorage/sessionStorage存数据

需要存储的对象→字符串 JSON.stringify();

存储该字符串

var information = newObject();
information.user= username;
information.age=age;
//将对象转换成字符串
var str = JSON.stringify(information);
localStorage stringify ("message",str);

 

（2）localStorage/sessionStorage：读数据

         读取该字符串

         读取的字符串→对象JSON.stringify();

Storage:只能存储字符串，不能存储对象或数组，如果要存储的话，需要经过转化，可以通过JSON对象中的string()将对象转化成字符串，然后，进行存储。同样的也可以通过JSON对象中的parse()将对象进行解析。

存储对比：

特性

Cookie

Localstorage

sessionStorage

生命周期

根据设置的时间

除非被删除，否则永远存在

浏览器一关闭，就不存在了

存储容量

<4kb

5Mb

和服务器通讯（http）

每次请求都会带上cookie

只保存在浏览器，和服务器没有半毛钱关系。

实用性

接口不大友好（参数需要自己拼接）

接口还可以接受吧，对于object、array等类型的数据存储比较麻烦。