HTML5-web 存储

Cookie

特点：

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

储存容量：<4kb

所有的http请求都回带cookie信息.(联想http get请求的可以传送的数据内容)，从某种意义上来说，用cookie存储不是那么的安全

 

document.cookie= "zz=huadianedu;path=/;expires=2017-08-31T01:11:50.000Z"

 

（1）  localStorage

2.1用法

 

2.1.1保存数据

localStorage.setltem（key，value）

setltem（key，value）有两个参数，第一个参数存储数据的域名，第二个参数存储数据的值。

2.1.2获取数据

localStorage.getltem（key）

getltem（k）只有一个参数，该参数是获取数据的 键名

2.1.3删除指定键名的数据

localStorage.removeltem（key）；

removeltem（k），根据指定键名删除数据。

2.1.4 清除

localStorage.clear（）

clear（）清除所有的存储在localStorage里的数据。

 

注意：key写具体的时候，要加“”。

localStorage的保存是没有期限的。

（2）sessionStorage

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

4、区别

特性

Cookie

LocalStorage

SessionStorage

生命周期

根据设置的时间

除非被清除否则永远存在

浏览器一关闭就消失

存储容量

<4K

5MB

5MB

和服务器通讯（http）

每次请求都会带上cookie

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

易用性

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

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

5、存储对象

5.1 JSON.parse（）将字符串转换成对象

5.2 JSON.stringify（）将对象转换成字符串

5.3解决问题

（1）存数据

先将需要存储的对象-à字符串JSON.stringify()

存储字符串。

var information =new Object();
information.user= userName;
information.age= age;
//将对象转换成对象
var str = JSON.stringify(information);
localStorage.setItem("message",str);

 

（2）  读数据

读取字符串

读取的字符串--->对象 JSON.stringify()

localStorage.setItem("message");
//解析对象
var result= JSON.parse(str);

 

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