【D1n910前端】浅谈localStorage和sessionStorage的应用

正常操作，正常分析，大家好，我是D1n910

本次要谈是localStorage和sessionStorage，本地存储和会话存储，他们的作用都是把数据存储到浏览器的内存中。

假设你都知道localStorage和sessionStorage是什么，以及基本的方法。

1、为什么用localStorage/sessionStorage

网页上的动态数据信息一般都是来自后端服务器，通过这样的方式动态显示数据，而不是一开始全部传过来，放到内存中。

为什么要用到本地存储，主要是为了功能需求。比如，后端服务器怎么知道这个哔哩哔哩页面的使用者是【D1n910 UID 12324653 】而不是【碧诗 UID 2】，可以通过每次请求后端的时候，告诉后端我是xxxx从而实现。以前的时候会用cookie，不过cookie存储拿取数据不方便、不安全、装得不够多，所以选用了localStorage/sessionStorage

2、localStorage/sessionStorage 区别

在同一协议、同一主机名和同一端口下。

localStorage

可以在不同窗口之间获取到localStorage数据。

清理方式：主动清理

sessionStorage

在同窗口内获取到sessionStorage数据。

清理方式：主动清理/关闭窗口

3、应用

面对一些前端页面的需求，比如一些神奇的交互。

针对【不同窗口下的需求】一般采用 localStorage。

举个例子：【A窗口】展现过一个alert，那么【B窗口】不再展示alert。

那么就可以在【A窗口】展现过一个alert后，修改 localStorage 对应的自定义标示ifAlert为true，然后【B窗口】调用 localStorage 的 ifAlert，看到是 true，则可不进行 alert。

再举个最常见的例子，不同窗口ajax请求会带上token去请求，【A窗口】请求刷新过 token 后，【B窗口】想要共用同一个 token，那么也是可以存到 locakStorage 里调用的。

针对【关掉窗口后就清理数据的需求】一般采用 sessionStorage。

比如还是上面的token例子，如果把 token 存到浏览器 localStorage 内，那么可能机主关掉浏览器后，会被某黑客进入，然后从缓存中获取到 token 进行使用。sessionStorage 则可以在关闭窗口后，清理对应的数据内容。