一篇文章让你了解cookie、localStorage、sessionStorage存储

引言

学习编程时，我们会常常听见本地存储这个词，而且本地存储的方式也有好几种，很多同学不清楚其中的异同，今天我来给大家介绍一下 本地储存localStorage、sessionStorage与cookie的区别。

cookie

Cookie顾名思义，非常小，大小在4KB左右。主要用途是保存登录信息，比如登录一个网站市场，是可以看到“记住密码”，这通常就是通过在Cookie中存入一段辨识用户身份的数据来实现的。
Cookie机制： 如果不在浏览器中设置过期时间，cookie被保存在内存中，生命周期随着关闭而结束，这种cookie简称cookie会话。如果在浏览器中设置了cookie的过期时间，cookie被保存在硬盘中，关闭浏览器后，cookie数据依然存在，知道过期时间结束才消失。
特点：
大小：cookie的大小限制在4k。每个域名下cookie的个数现在在20个。
在客户端请求服务器端和服务器响应时，cookie始终被携带在http请求中，即使不需要(造成流量浪费)。这也是限制cookie大小的原因。
客户端可以通过document.cookie操作cookie，并不安全。
cookie可以设置过期时间、路径、域和httpOnly等字段。如果设置了过期时间，cookie会保存在硬盘里，知道到了设定的过期时间才会失效。若未设置过期时间，在浏览器窗口关闭时，cookie就失效了。路径和域两个字段限制了cookie的作用范围。httpOnly设置为true，则js不能通过document.cookie操作cookie。

localStorage

localStorage是HTML5新加入的技术，并非划时代的东西。早在IE6时代，就有叫userData的东西用于本地存储，而当时考虑到浏览器的兼容性，更通用的方案是使用Flash。而如今，localStorage被大多数浏览器所支持。
它也是采用key-value的形式存储数据，但是它与cookie有很大的区别。
特点：
对比着来，localStorage能保存更大的数据，标准浏览器是5Mb。
localStorage保存在客户端，不随着请求发送给服务器，避免了流量的浪费。
客户端可以通过：setItem、getItem方法访问localStorage。
并且，localStorage没有过期时间，如果不手动清除，数据就永远不会过期，一直保存在浏览器当中。
存储的信息在同一域中是共享的。

sessionStorage

sessionStorage与localStorage的接口类似，但保存数据的生命周期与localStorage不同。session的意思是“会话”，而作为一个前端概念，他只是可以将一部分数据在当前会话保存下来，刷新页面数据依旧存在，但当页面关闭后，sessionStorage的数据就会被清空。
session机制：当服务器收到请求需要重新创建session对象时，首先会检查客户端请求中是否包含sessionId。如果有sessionId，服务器将根据id返回对应的session对象。如果客户端请求中没有sessionId，服务器会重新创建新的session对象，并把seesion在本次响应中返回客户端。通常使用cookie方式存储sessionId到客户端，在交互中浏览器按照规则将sessionId发送给服务器。如果用户禁用cookie，则要使用URL重写。
特点：
与localStorage不同的是，sessionStorage并不持久化，在窗口关闭那一刻，sessionStorage会被清除。
存储的信息是会话级别的，同域也是不能共享的。关闭当前标签页，sessionStorage即失效。

操作方法

LocalStorage和sessionStorage具有相同的操作方法

1：sessionStorage.setItem("key","value");

2：sessionStorage.getItem("key");

3：sessionStorage.removeItem("key");

4：sessionStorage.clear();

5：点操作和[]操作

 sessionStorage.key = "value";
 sessionStorage["key"] = "value"

cookie的操作方法

1：Cookies.set('keyName',value);
2：Cookies.get(keyName);    
3：Cookies.remove(keyName);

注意：在Cookie中存对象后取出的时候需要把字符串转成json格式

  const  obj=   JSON.parse(Cookies.get("user"))

总结

好了，今天的分享就以上这些了，希望对新手朋友有所帮助，当然真正想完全掌握好这些知识，还是得多实战。各位加油吧！
最后，创作不易，各位的点赞和关注就是我创作的最大动力，我们下篇文章见。
逆战必胜！！！