当前位置:   article > 正文

前端存储数据_前端存入的数据

前端存入的数据

前端常用的存储数据的方式有2种:

  1. 本地存储:(localstorage、sessionstorage、cookie)
  2. 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左右,并且安全性较低,它存在客户端

嗯~

总结就到这啦 ~~

  

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/一键难忘520/article/detail/742032
推荐阅读
相关标签
  

闽ICP备14008679号