sessionStorage，localStorage，cookie，web前端开发数据存储

    在前端开发中需要存储一些数据，在其他页面进行使用。主要涉及到sessionStorage，localStorage，cookie这三种方式。

    cookie会在浏览器请求头或者ajax请求头中发送cookie内容，比如我们把用户名密码存储在cookie中，以后每次打开页面，浏览器发送的请求中带有用户密码信息，就可以实现自动登录了。Cookie用来做用户和权限的识别与鉴定。Cookie是浏览器存储，只有4K的存储空间，数据容易被获取，安全性比较低，容量小，不适合大量数据的存储。

    Session是服务器存储，安全性更高，session的存储空间为5M，相比cookie容量大。

    localStorage的生命周期是永久的。除非主动删除否则永远存在。而sessionStorage的数据在浏览器窗口关闭以后就清除了。localStorage和cookie可以跨窗口存在，sessionStorage只对当前页面有效，适合单页面应用。

    我在开发中使用的是sessionStorage，其基本用法有四种，开发中我们可以将它们单独封装成函数，以后需要的时候调用即可。封装如下。

 
    在其他页面需要调用时import即可。

 

    我们可以将Cookie和session结合使用，cookie存储密钥信息，每次发送请求带一个参数，根据密钥是否正确、是否过期，判定是否响应请求。

    下面说说数据存储与Vuex的结合使用。

    Vuex是专为Vue.js开发的状态管理模式。优点是可以进行组件间数据的高效更新。Vuex不是一种数据存储，而是数据传递，页面一刷新数据就没有了。为了保证刷新后 Vuex的数据丢失，需要先进行session存储，刷新后将数据从session中取出再给vuex。

    如下图所示，在页面的header中有userName信息，个人中心页面写在container中，修改用户名的时候需要header中的userName实时更新。就要用到vuex。

 

    首先npm install vuex安装，再在main.js中引入，

 

    第二条引入的store就是我们接下来需要新建的vuex仓库。在src下创建一个vuex文件夹，新建store.js，文件内容如下。

 

    接下来我们就可以在组件中进行状态修改和参数传递。首先，在template中绑定变量userName

   在data中将状态映射到组件，

 

    这样，当其他页面的提交状态修改时，该页面的参数就能实时更新。提交状态信息修改的方法是，

 

    上面还用到了sessionStorage，是为了防止页面刷新vuex数据丢失。刷新之后vuex从sessionStorage中再获取数据就可以保证页面刷新数据不丢失了。