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 = new Object(); 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等类型的数据存储比较麻烦。