浅谈vuex和localstorage

于 2023-06-05 16:04:22 发布
阅读量266 收藏
点赞数 1
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014717572/article/details/131050047
版权

1.vuex存储在内存，localstorage则以文件的方式存储在本地

2.vuex用于组件之间的传值，localstorage则主要用于不同页面之间的传值

3.当刷新页面时vuex存储的值会丢失，localstorage不会

备注：很多伙伴觉得用localstorage可以代替vuex, 对于不变的数据确实可以，但是当两个组件共用一个数据源（对象或数组）时，如果其中一个组件改变了该数据源，希望另一个组件响应该变化时，localstorage无法做到

燕山八音
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vuex 和 localStorage 的区别
weixin_38629440的博客
03-24 310
Vuex 和 localStorage 的区别 最重要的区别：vuex 存储在内存中localstorage 则以文件的方式存储在本地，只能存储字符串类型的数据，存储对象需要 JSON 的 stringify 和parse 方法进行处理。读取内存比读取硬盘速度要快。 应用场景 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则...
Vuex与localStorage的区别
最新发布
橘导的博客
04-07 187
vuex能做到数据的响应式，localstorage不能。2、应用场景：vuex用于组件之间的传值，localstorage则主要用于不同页面之间的传值。1、最重要的区别：vuex存储在内存，localstorage则以文件的方式存储在本地。3、永久性：当刷新页面时，vuex存储的值会丢失，localstorage不会。
vuex和localstorage语法
PCthedream的博客
04-08 416
ocalStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。localStorage 属性是只读的。
vuex和localstorage,sessionStorage存储方式，及区别
sunluyi的博客
01-06 1163
sessionStorage sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。 用法： 存： // 1. 点（.）运算符 sessionStorage.lastname = 'key'; 2. 方括号（[ ]）运算符 sessionStorage['lastname'] ...
有localstorage，为什么还要用vuex
qq_53026081的博客
04-14 700
总的来说，vuex是为了用来响应，而本地存储的数据不是响应式的！！！
nuxt-vuex-localstorage
05-05
通过连接Vuex和Web存储，可以更有效地利用本地存储和会话存储。 与其他持久性插件不同，通过仅分配Vuex的某些特定对象，Web存储可以节省更多空间，并且还可以与现有Vuex用法一起使用。 通过本地存储的数据绑定可以...
VUEX和LocalStorage的应用
12-29
针对初学者，学习VUE中VUEX和LocalStorage的实际应用效果
详解vuex结合localstorage动态监听storage的变化
12-12
需求：不同组件间共用同一数据，当一个组件将数据发生变化时，...关于vuex和storage的区别 1.最重要的区别：vuex存储在内存，localstorage则以文件的方式存储在本地 2.应用场景：vuex用于组件之间的传值，localstora
vue2.0+vuex+localStorage代办事项应用实现详解
12-01
vue2.0+vuex+localStorage 待办事项源码：https://github.com/Mynameisfwk/vue-Todo-list 参考代码：https://github.com/Mynameisfwk/vivo-shop 代码预览 vuex官方文档 https://vuex.vuejs.org/ 我觉的官方文档说明...
基于vue2.0+vuex+localStorage开发的本地记事本示例
01-19
本文采用vue2.0+vuex+localStorage+sass+webpack，实现一个本地存储的记事本。兼容PC端和移动端。 实现效果 功能说明 支持回车添加事件 支持事件状态切换 添加事件 -> 进入未完成列表 未完成 -> 已完成(勾选...
vuex结合localStorage的使用方法
weixin_43550562的博客
02-10 3147
源码地址：https://github.com/andyzhang0511/VuexStudy vuex学习参考文章：https://www.cnblogs.com/chinabin1993/p/9848720.html 先看一下我的目录结构: 1.main.js 入口 加载组件 初始化等 import Vue from 'vue' import App from './App' import ...
vuex存储和本地存储(localstorage、sessionstorage)的区别
weixin_42062766的博客
07-26 917
区别及适用场景 1.区别：vuex存储在内存，localstorage（本地存储）则以文件的方式存储在本地,永久保存；sessionstorage( 会话存储 ),临时保存。localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理。 2.应用场景：vuex用于组件之间的传值，localstorage则主要用于不同页面之间的传值。 3.永久性：当刷新页面时vuex存储的值会丢失，loc..
小程序中使用 web-view 嵌入H5程序 localStorage和vuex的选择
hjh15827475896的博客
11-09 1294
这里说一下它出再的问题 使用localStorage 把token 记录入缓存之后， 这个缓存不好控制清除的时间， 因为， 在用户访问期间， 我是需要它的， 用户走了之后， 我是要清除它的， 这对程序来说根本不知道该什么时候清除。如果一个用户使用完了，关闭了小程序， 10分钟后，又回来打开小程序，这时 localStroage 还是存在的，此时，就不会发送短信了，这与我们的要求 不相符，要求是用户每次进入的时候都要发送短信。这里要解决用户的认证问题，我们的思路是这样的。
VUE vuex、localStorage和sessionStorage的区别
ICanWin_lll的博客
08-16 712
一、vuex vuex是vue中的状态管理机制,用于组件之间共享数据，数据保存在内存中 一个组件的数据变化会映射到使用这个数据的其他组件。再说localstorage 刷新页面的话，之前存在vuex里的数据会被初始化掉，vuex里面的数据会丢失掉。 二、localStorage localstorage（本地存储）则以文件的方式存储在本地,永久保存 localStorage会持久化存储，而且在多页面可以共享 localStorage无法和Vue很好的结合，修改之后不会触发View的响应式变化
vuex、localstorage购物车
fcoderya的博客
10-19 413
vuex+浏览器本地储存localstorage管理购物车 总结： 1、localStorage和sessionStorage的区别：localstorage可以将第一次请求的数据直接存储到本地，但在IE8以上才支持这个属性，目前所有浏览器都会把localstorage的值类型限定为string类型，所有我么比较常见的json对象类型需要一些转换，本质是对字符串的读取，如果存储内容多的话会消耗内存空间，导致页面变卡。（不能被爬虫抓取到）。与sessionStorage唯一的区别就是localStorage
vuex和 localStorage 区别
qq_44698161的博客
11-30 5996
11.29笔记vuex和 localStorage 区别浏览器回退 刷新：更改配置文件后 ==重启==才能生效！ vuex和 localStorage 区别 最重要的区别：vuex存储在内存，localstorage则以文件的方式存储在本地 应用场景：vuex用于组件之间的传值,（响应式的），localstorage则主要用于不同页面之间的传值（其他页面更新数据了，当前页面要刷新才能相应更...
vue 将数据保存到vuex中
热门推荐
tumi
11-26 2万+
在项目中遇到这样一个问题，就是在登入的时候同时需要从后台获取到左边的导航，但是如果使用h5的localStorage来保存导航信息，会出现app加载进去之后localStorage才保存进浏览器，在mounted方法中，console.log(window.localStorage.getItem('xx')打印出来是undefined，于是把数据保存到vuex中管理，以下是把数据保存到vuex中
vuex和localstorage结合
10-14
在Vue.js中，Vuex是一个状态管理库，用于管理应用程序的所有组件的状态。而localStorage是浏览器提供的一种本地存储机制，可以将数据存储在用户的浏览器中。将Vuex和localStorage结合使用可以实现在刷新页面或关闭浏览器后仍然保留应用程序的状态。 具体实现方法是，在Vuex的store中添加一个插件，该插件会在每次mutation被调用时将state存储到localStorage中。在应用程序启动时，从localStorage中读取state并将其设置为Vuex store的初始状态。 以下是一个简单的示例： ```javascript const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment(state) { state.count++ } }, plugins: [ (store) => { // 在每次 mutation 之后调用 store.subscribe((mutation, state) => { // 将 state 存储到 localStorage 中 localStorage.setItem('my-app-state', JSON.stringify(state)) }) } ] }) // 在应用程序启动时从 localStorage 中读取 state const savedState = JSON.parse(localStorage.getItem('my-app-state')) if (savedState) { store.replaceState(savedState) } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值