前端存储cookie、sessionstorage、localstorage的区别

cookie、sessionstorage和localstorage都是web前端存储数据的方法，其中sessionstorage和localstorage是html5的新特性

咱们先来看看相同点：三者都能存储数据（这不是废话吗！！！），这三者都是为了方便存取数据而设计的，这个是毋庸置疑的。

接下来就是三者的不同点了：

1、与后端的交互不同：

三种存储方式中，只有cookie是自动提交到后端的，cookie可以看作是http协议的

拓展实现，cookie会跟随在http会话中自动提交，后端可以使用已有的方法取用，比如

tp5的获取可以使用Cookie::get('name')获取存储在cookie中的name的值

2、存储周期和作用域不同：

cookie默认的有效期非常短，存在于web浏览器会话期间，当浏览器关闭，cookie也就

消失了。如果想要延长cookie的有效期，可以设置 max-age属性（单位秒）写法示

例：document.cookie='cookie_name=cookie_value5;path=/;'+'max-age=Session;'

cookie作用域是通过domain文档源和path文档路径来确定的。默认情况下，cookie和创

建它的web页面有关，并对web页面和该web页面同目录或者子目录的其他web页面可

见。当设置path="/"，它的作用域就变成文档源级别的了。

localStorage有效期：永不失效，除非web应用主动删除。

localStorage作用域：localStorage的作用域是限定在文档源级别的。文档源通过协议、

主机名以及端口三者来确定。

sessionStorage有效期：sessionStorage的有效期是和存储数据脚本所在的最顶层的窗

口或者是浏览器标签是一样的，一旦窗口或者标签页被永久关闭了，存储的数据也就失

效了。

sessionStorage作用域：sessionStorage的作用域也是限定在文档源级别。但需要注意

的是，如果相同文档源的页面渲染在不同的标签中，sessionStorage的数据是无法共享

的。（新建标签打开同一个页面时是无法使用同一个session的）

3、存储空间大小不同：

cookie最大4k，sessionstorage 和localstorage可以达到5m甚至是更大

针对三种存储方式的不同可以应用于不同的场景，cookie多用于登陆状态保存，sessionstorage

和localstorage多用于统计访问次数等特定数据的统计和存储

by：程序猿，小宅~

ps：承接私活服务，服务范围公司网站，webapp，小程序~~~

微信：z13589337725

qq:2454062857