cookie、LocalStorage、sessionStorage三者区别以及使用方式

cookie用来保存客户浏览器请求服务器页面的请求信息

HTML5的WebStorage提供了两种API：localStorage（本地存储）和sessionStorage（会话存储）

WebStorage的目的是克服由cookie所带来的一些限制，当数据需要被严格控制在客户端时，不需要持续的将数据发回服务器

三者的共同点都是保存在浏览器端，且同源

下面是他们之间的区别

生命周期

cookie：可以通过expires设置失效时间，不设置默认关闭浏览器即失效

localStorage：除非手动清除，否则永久保存

sessionStorage：仅在当前会话时候生效，关闭页面即失效

存储大小

cookie:4KB左右

localStorage、sessionStorage:可以保存5M的信息

HTTP请求

cookie:每次都会携带在http头中，过多使用cookie会带来性能问题

localStorage、sessionStorage:仅在客户端（即浏览器）中保存，不参与和服务器的通信

易用性

cookie:需要程序员自己封装，源生的Cookie接口不友好

localStorage、sessionStorage：源生接口可以接受，亦可再次封装来对Object和Array有更好的支持

应用场景

cookie：适合识别用户登录

localStorage和sessionStorage唯一的差别一个是永久保存在浏览器里面，一个是关闭网页就清除了信息

localStorage：可以用来跨页面传递参数

sessionStorage：用来保存临时数据，防止用户刷新页面之后丢失参数

 

---

 

使用方式

cookie使用方式 移步 https://www.cnblogs.com/theblogs/p/10617515.html

localStorage和sessionStorage所使用的方法是一样的

设置本地存储

localStorage.setItem('user','小明');

获取本地存储

localStorage.getItem('user');

删除本地存储

localStorage.removeItem('user');

清除本地存储

localStorage.clear();

 

以sessionStorage为栗子

var name='sessionData';
var num=120;
sessionStorage.setItem(name,num);//存储数据
sessionStorage.setItem('value2',119);
let dataAll=sessionStorage.valueOf();//获取全部数据
console.log(dataAll,'获取全部数据');
var dataSession=sessionStorage.getItem(name);//获取指定键名数据
var dataSession2=sessionStorage.sessionData;//sessionStorage是js对象，也可以使用key的方式来获取值
console.log(dataSession,dataSession2,'获取指定键名数据');
sessionStorage.removeItem(name); //删除指定键名数据
console.log(dataAll,'获取全部数据1');
sessionStorage.clear();//清空缓存数据：localStorage.clear();
console.log(dataAll,'获取全部数据2'); 

 

参考：https://juejin.im/post/5a191c47f265da43111fe859