Haytham个人博客开发日志2 -- 前端的数据存储

指路牌

• 前端数据存储的选择，与各自适用在什么场景
• cookie、Web Storage、Vuex、变量

适用场景

• 数据源统一管理
• 登陆状态管理
• 标签(页面)级通信

参考博客

客户端本地存储（cookie、web Storage、vuex）选择

背景

在前一篇博客《Haytham个人博客开发日志 – Flask+Vue基于token的登录状态与路由管理》中，使用了vuex与localStorage来管理用户的登陆状态，也提到了放弃使用cookie，最近有时间刚好来详细研究一下在前端开发中数据存储的几种方式，由于前端我的主要框架时Vue，因此此处也带了vuex的介绍。

就我目前了解到，前端存储数据的方式一共有以下几种：cookie、Web Storage(包含localStorage与sessionStorage)，自己设置的变量，Vuex（Vue提供的），下面将依次介绍各种存储技术，以及对使用场景的推荐。最后将解释为什么我最终选用localStorage+Vuex的方式来管理登陆状态。

Cookie

简介

• 特点 ：大小4K    有时效性    会与服务器间互相传递
• cookie是由服务器产生，存储在客户端的一段信息，在同源（即：协议、主机地址、端口号一致）的http请求头上携带（即使不需要）
• 在浏览器和服务器之前来回传递，用来处理客户端和服务器通信。

若设置了过期时间，则在过期时间之前，一直存储在浏览器中，即使窗口或浏览器关闭也有效。（保存在硬盘）
若不设置过期时间，窗口或浏览器关闭立即失效。（保存在内存）

Cookie简评

cookie非常便捷和方便，被广泛应用于前端开发。我之所以放弃使用cookie出于两个原因，1.浏览器给予了用户禁cookie的权限，当然大部分用户不会这么做，但一旦cookie被禁用将导致很多系统出现问题（检测cookie不可用请求用户开启另说）2.由于cookie与浏览器是密不可分的，当后台API具有处理cookie的代码时，势必该API无法给移动端通用。

实际上我是没有移动端需求的，只是处于通用型的追求，放弃了使用cookie

Web Storage

简介

• 特点：大小5M 仅本地保存，不会自动发送服务器 隐私模式不可读取、不可被爬虫抓取
• 分类：localStorage，sessionStorage
• localStorage ：在本地永久性存储数据，除非显式将其删除或清空

打开同域的新页面也能访问到，在浏览器打开关闭期间都可以访问,
地址：…/Google/Chrome/User Data/Default/Local Storage/leveldb

• sessionStorage ：存储的数据只在会话期间有效，关闭浏览器则自动删除。

页面会话在浏览器打开期间一直保持，并且重新加载（F5刷新）或恢复页面（即当前网址变为其他又还原）仍会保持原来的页面会话，不会消除存储数据。

• 不同窗口或同一窗口不同标签页共享localStorag
• sessionStorage只能在一个页面(标签)中使用，无法与相同浏览器下的其他标签共享。

Web Storage简评

从以上特点可以看出，localStorage是比较适合来存储一些需要在一定时间内被存储的数据的，sessionStorage只能在一个标签中使用，不能在一个浏览器的多个标签间保持状态统一，暂时我没有想到很好的使用场景，但是localStorage是很适合用来实现登陆状态管理的，典型比如一个浏览器打开了多个同一个网站，其中一个登陆另外一个应该都转变为登陆状态，sessionStorage明显做不到这一点，cookie能否做到，暂时尚未验证。

由于localStorage能够跨标签共享，因此可以使用postMessage实现跨页面的通信，详细请参考“参考博客”。

Vuex

简介

• vuex是Vue的状态管理机制，可以不严谨的理解为“全局变量”，但当然不是这么简单的。想要具体学习请参考官方文档。

Vuex

Vuex简评

其实Vuex是不应该和cookie，Web Storage放在一起比较的，因为他们不是一个层级的东西，而把她们列在一起也是因为自己初学理解的不是清楚。Vuex完全是Vue内部的，组件级的，他的生命周期只在一个Vue实例中，每次页面刷新都会导致存储丢失，更不用说标签的变动了。但是他可以很好的实现组件间的数据传递与组建状态管理。本身还是很有用的。

回到最开始的问题，“为什么我最总选用localStorage+Vuex的方式来管理登陆状态?”
其实在这个组合中，localStorage才是核心，Vuex是辅助作用，从后台获取的token也不是存储在Vuex中，而是存储在localStorage的，每次页面打开都会先从本地检查localStorage内是否有token，依次来管理后续的路由跳转与请求发起。把一个标签必做一个计算机的话，vuex是内存，localStorage是硬盘。
当然也正是因为localStorage的可跨标签访问的特性，让多个标签可以同时保持登陆状态，这是一个很与意思的组合。

后记

一开始觉得写个博客系统挺容易的，后来发现实现核心的功能是不太难，但是要让系统难看，能用，开始雕琢细节的时候，就开始很崩溃了，这也许就是原型与产品的区别的区别的。
ps：前端markdown的解析库真是难受…研究的脑壳疼…

要获取更多Haytham原创文章，请关注公众号"许聚龙":