web storage介绍
web storage
和Cookie
都是用来在客户端存储数据。
web storage又分为localStrage
和sessionStorage
Cookie的弊端
- 每次请求时,cookie都会存放在请求头中。
- 请求被拦截,cookie数据会存在安全隐患。
- cookie的大小被限制在4K。IE8、Firefox、opera每个域可以保存的50个cookie,Safari/WebKit没有限制。
web storage的特点
优点
- 每个域Chrome,Firefox和Opera是5M,IE是10M。
- 请求中不会携带数据
局限性
- 目前所有的浏览器中都会把localStorage的值类型限定为string类型,这个在对我们日常比较常见的JSON对象类型需要一些转换
- localStorage在浏览器的隐私模式下面是不可读取的
- localStorage本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡
- localStorage不能被爬虫抓取到
localStorage
- localStorage存储的数据不会过期,除非用户清空浏览器缓冲。
/*======================
* 存储变量方法 *
=======================*/
localStorage.setItem("name","caibin");
localStorage.name = "caibin";
localStorage['name'] = "caibin";
/*======================
* 读取变量方法 *
=======================*/
localStorage.getItem("name");
localStorage.name ;
localStorage['name']
localStorage.valueOf(); //读取存储在localStorage上的所有数据
localStorage.key(0); // 读取第一条数据的变量名(键值)
/*======================
* 删除变量方法 *
=======================*/
localStorage.removeItem("name");
localStorage.clear(); //清空localStorage
/*======================
* 存储JSON *
=======================*/
var data={
name:'xiecanyong',
sex:'man',
hobby:'program'
};
//存JSON
var d=JSON.stringify(data);
localStorage.setItem("data",d);
//读JSON
json=localStorage.getItem("data");
var jsonObj=JSON.parse(json);
sessionStorage
- 关闭浏览器后数据就会被清空。
操作方法和localStorage一样。举一个例子,剩下的参考localStorage操作方法
/*======================
* 存储变量方法 *
=======================*/
sessionStorage.setItem("name","caibin");
sessionStorage.name = "caibin";
sessionStorage['name'] = "caibin";