前端存储数据

前端常用的存储数据的方式有2种：
本地存储：(localstorage、sessionstorage、cookie)
Vuex容器：(state、geeter、mutations、action、modules)
     vuex存储在内存；
     localstorage（本地存储）则以文件的方式存储在本地,永久保存；
     sessionstorage( 会话存储 ) ,临时保存。
     localStorage和sessionStorage只能存储字符串类型，
     对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理。
Vuex容器与本地存储的区别：

1、实质的区别
vuex存的是状态，存储在内存，localstorage是浏览器提供的接口，让你存的是文件，以文件的形式存储在本地

2、应用场景
vuex用于组件之间的传值，localstorage则主要用于页面之间的传值

3、永久性
当刷新页面时，vuex存储的值会丢失，localstorage不会

4、响应式

localstorage无法做到响应式，vuex可以绑定数据响应式。

总结：使用vuex容器存储数据时，可以配合localstorage（sessionStorage）来存储到本地，实现持久化数据

 

      localStorage.setItem(key, String), set的值必须是字符串，如果你的数据是对象都需要先行转换（JSON.stringify(xxx)）,取出时localStorage.getItem(key)，取出后的字符串可以通过JSON.parse(xxx) 转回对象。

保存token的方法

获取token的方法

 

localstorage、sessionstorage、cookie的区别？
1. sessionStorage

        sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

2. localStorage
　　localStorage 方法存储的数据没有时间限制。

3. cookie
　　cookie和session都是用来跟踪浏览器用户身份的会话方式。
　　cookie机制：如果不在浏览器中设置过期时间，cookie被保存在内存中，生命周期随浏览器的关闭而结束，这种cookie简称会话cookie。如果在浏览器中设置了cookie的过期时间，cookie被保存在硬盘中，关闭浏览器后，cookie数据仍然存在，直到过期时间结束才消失。
　　但是cookie的大小限制在4kb左右,并且安全性较低,它存在客户端