一、localstorage 的优缺点
优点:
1、localStorage 的存储大小是5M,而cookie的存储大小只有4K,解决了cookie存储空间不足的问题
2、localStorage 可以将第一次请求的数据直接存储到本地,相当于是一个针对前端而言的5M的数据库,相比于cookie可以节约带宽
缺点:
1、浏览器的大小不统一,并且在IE8以上版本才支持
2、对于一些操作,如F5刷新,会发起 cache-control:max-age=0 的请求
3、目前所有的浏览器中都会吧localStorage 的值类型限定为string类型,这个在比较常见的JSON中需要做一些转化
4、localStroage 本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面卡顿
5、localStorage 不能被爬虫抓取到
localStorage 属于永久性存储,sessionStorage 属于当会话结束时,存储的内容会被清空
二、localStorage 的使用 (增删改查)
因为某些浏览器还不支持localStorage,所以可以先做判断
if(!window.localStorage){
alert("浏览器不支持localStorage!请使用高版本的Chrome或者Firefox");
return false;
}else{
//业务逻辑
}
1、添加本地存储( 有三种方法,但是推荐使用 getItem() )
var storage = window.localStorage;
storage["a"] = 1; //方法一
storage.b = 2;//方法二
storage.setItem("c", 3);//方法三 推荐
2、获取本地存储(有三种方法,推荐使用getItem())
var storage = window.localStorage;
storage.a //1
storage["b"];//2
storage.getItem("c"); //3
3、修改本地存储
storage.a =4;
storage.a; // 4
4、 删除本地存储
清除所有内容: storage.clear();
清除某个键值:storage.removeItem("a");
三、其他需要注意的:
我们一般会将JSON存入localStorage ,需要将JSON格式的数据转化为string类型,需使用 JSON.stringify();
读取之后要将JSON字符串转化成JSON对象,使用JSON.parse();
注:其他类型的也需要转化为string,这里就不再介绍了,下面只介绍了JSON转化为string
var storage=window.localStorage;
var data={
name:‘user‘,
sex:‘female‘,
age:18
};
var d=JSON.stringify(data);
storage.setItem("data",d);
var json=storage.getItem("data");//将JSON字符串转换成为JSON对象输出
var jsonObj=JSON.parse(json);
console.log(typeof jsonObj);