前端本地存储
背景：早期互联网时代使用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
网友评论