zoukankan      html  css  js  c++  java
  • VueX存储与本地存储以及会话存储的区别

    区别及适用场景

    1.区别:vuex存储在内存,localstorage(本地存储)则以文件的方式存储在本地,永久保存;sessionstorage( 会话存储 ) ,临时保存。localStorage和sessionStorage只能存储字符串类型,对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理。

     2.应用场景:vuex用于组件之间的传值,localstorage则主要用于不同页面之间的传值。

    3.永久性:当刷新页面时vuex存储的值会丢失,localstorage不会。注:很多同学觉得用localstorage可以代替vuex, 对于不变的数据确实可以,但是当两个组件共用一个数据源(对象或数组)时,如果其中一个组件改变了该数据源,希望另一个组件响应该变化时,localstorage无法做到响应式,vuex可以绑定数据响应式。

    Vuex数据状态持久化的使用场景

    1、购物车
    比如你把商品加入购物车后,没有保存到后台的情况下,前端来存,就可以通过这种方式vuex+localStorage(sessionStorage)。

    2、会话状态
    授权登录后,token就可以用Vuex+localStorage(sessionStorage)来存储。

    3、一些不会经常改变的数据
    比如城市列表等(当前也要留下可以更新的入口,比如版本号)

    小提示:localStorage.setItem(key, String), set的值必须是字符串,如果你的数据是对象都需要先行转换(JSON.stringify(xxx)),取出时localStorage.getItem(key),取出后的字符串可以通过JSON.parse(xxx)转回对象。
  • 相关阅读:
    自定义checkbox样式
    自定义select样式
    jsonp
    I/O复用 poll简介
    DOS和DDOS攻击
    TCP状态转换图解析
    Makefile入门
    I/O复用select 使用简介
    替换文本内容
    share memory
  • 原文地址:https://www.cnblogs.com/huayang1995/p/13865362.html
Copyright © 2011-2022 走看看