前端本地存储

前端本地存储

背景：早期互联网时代使用URL传参来管理页面间的状态共享，由于比较繁琐，且每次页面跳转都要手动设置，衍生出了cookie乃至后面的webStorage等前端本地存储技术。

Ⅰ.关于本地存储：

➀.概念：本地存储就是把一些信息存储在当前浏览器的指定域下的某个地方

➁.特点：

• 不能跨浏览器传输：在谷歌浏览器中存储的信息，在IE浏览器中无法获取

• 不能跨域传输：在京东域下存储的信息，在淘宝域下不能获取到

• 常用的本地存储方式：主要有cookie、webStorage（localStorage和sessionStorage）

Ⅱ.存储方式的详解和比较：

NO.	cookie	sessionStorage	localStorage
1.存储大小	数据大小不能超过4K（一个汉字需要2字节，4k的话可以2000个）	5M左右	5M左右
2.有效期	如果设置有效期，就有保存期限，不受浏览器关闭影响。没有设置有效期，关闭浏览器cookie自动消失	数据在当前浏览器窗口关闭后自动删除	存储持久数据，浏览器关闭后数据不丢失除非主动删除数据
3.数据与服务器之间的交互方式	会自动的传递到服务器，服务器端也可以写cookie到客户端	不会自动把数据发给服务器，仅在本地保存	不会自动把数据发给服务器，仅在本地保存
4.作用域（同个浏览器下）	在所有同源域名窗口中都是共享的	在同一个窗口是共享的	在所有同源域名窗口中都是共享的

关于sessionStorage

• 如果当前窗口的网页之间进行切换，但是仍然是在当前窗体，那么sessionStorage将是实时同步的
• 如果当前窗口的当前网页发生跳转，跳转到新页面去了（打开了新的选项卡或者新的窗体），那么当前窗体页面所具有的sessionStorage会被带到新的窗口页面去，但是在新窗体发生的sessionStorage改变不会影响到原本的窗体页面的sessionStorage
• SsessionStorage依赖于窗口，而不依赖于页面。

关于localStorage

localStorage的值被设置后，在当前项目（域）下的所有页面都有效

Ⅲ.控制台查看前端存储

Snipaste_2020-08-07_15-43-24.png

Ⅳ.应用场景

目前做过的项目都是采用cookie+localStorage的方式，把认证信息存在cookie，其他状态管理信息存储在localStorage