三分钟快速了解 localStorage 与 sessionStorage及区别

localstorage（本地存储）

优势

• localStorage 拓展了 cookie 的 4K 限制。
• localStorage 会可以将第一次请求的数据直接存储到本地，这个相当于一个 5M 大小的针对于前端页面的数据库，相比于 cookie 可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的。
• 不会传送到服务器，存储在本地的数据可以直接获取，减少了客户端和服务器端的交互，节省了网络流量

局限

• 浏览器的大小不统一，并且在 IE8 以上的 IE 版本才支持 localStorage 这个属性。
• 目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换。
• localStorage在浏览器的隐私模式下面是不可读取的。
• localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡。
• localStorage不能被爬虫抓取到。
• 仅保存在客户端，不参与和服务器的通信
• 数据对象没有过期时间，除非你手动去删除。

存储对象属性

属性	描述
length	返回存储对象中包含多少条数据。

存储对象方法

方法	描述
key(n)	返回存储对象中第 n 个键的名称
getItem(keyname)	返回指定键的值
setItem(keyname, value)	添加键和值，如果对应的值存在，则更新该键对应的值。
removeItem(keyname)	移除键
clear()	清除存储对象中所有的键

首先在使用 localStorage 的时候，我们需要判断浏览器是否支持 localStorage 这个属性：

if(!window.localStorage){
    alert("浏览器不支持localstorage");
}else{
    alert("浏览器支持localstorage");
    //主逻辑业务
}

三种方法写入

if(!window.localStorage){
    alert("浏览器不支持localstorage");
}else{
    var storage=window.localStorage;
    //写入方法一：a字段
    storage["a"]=1;
    //写入方法二：b字段
    storage.b=2;
    //写入方法三：c字段（官方提倡）
    storage.setItem("c",3);
    console.log(typeof storage["a"]);
    console.log(typeof storage.b);
    console.log(typeof storage["c"]);
}

三种方法读取

if(!window.localStorage){
    alert("浏览器不支持localstorage");
}else{
    var storage=window.localStorage;
    storage["a"]=1;
    storage.a=2;
    storage.setItem("c",3);
    //第一种方法读取
    console.log(storage.a);//1
    //第二种方法读取
    console.log(storage["b"]);//2
    //第三种方法读取（官方提倡）
    console.log(storage.getItem("c"));//3
}

修改与写入一致，就是覆盖原来的数据

删除

1、将localStorage的所有内容清除

var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
console.log(storage);
storage.clear();
console.log(storage);

2、 将 localStorage 中的某个键值对删除

var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);  //设置
console.log(storage);
storage.removeItem("a"); //移除
console.log(storage.a);  //undefined

键key的获取

var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
for(var i=0;i<storage.length;i++){
    var key=storage.key(i);
    console.log(key);//a c
}

注意事项

一般我们会将 JSON 存入 localStorage 中，但是在 localStorage 会自动将 localStorage 转换成为字符串形式。
这个时候我们可以使用 JSON.stringify() 这个方法，来将 JSON 转换成为 JSON 字符串。读取之后要将 JSON 字符串转换成为 JSON 对象，使用 JSON.parse() 方法：

var storage=window.localStorage;
var data={
    name:'fur',
    sex:'girl',
    hobby:'code'
};

//将对象转换成json格式字符串
var d=JSON.stringify(data);
console.log(d)
//{"name":"fur","sex":"girl","hobby":"code"}

//将字符串存入data
storage.setItem("data",d);

//获取字符串形式的data
var json=storage.getItem("data");

//将JSON字符串转换成为JSON对象输出
var jsonObj=JSON.parse(json);
console.log(jsonObj)
//Object { name: "fur", sex: "girl", hobby: "code" }
console.log(typeof jsonObj);//object

sessionStorage （会话存储）

sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据，增删改查写法与localstorage一致，不在赘述。

if(!window.sessionStorage ){
    alert("浏览器不支持sessionStorage ");
}else{
    alert("浏览器支持sessionStorage ");
    //主逻辑业务
}

localStorage 与 sessionStorage 区别

• localStorage 属于永久性存储，而 sessionStorage 属于当会话结束的时候，sessionStorage 中的键值对会被清空。

• 不同浏览器无法共享localStorage或sessionStorage中的信息。同一浏览器的相同域名和端口的不同页面间可以共享相同的 localStorage，但是不同页面间无法共享sessionStorage的信息。

• localStoragese：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据，而sessionStorage：敏感账号一次性登录