vuex与localstorage

区别:vuex数据存储的内存,localstorage的数据存储在本地

应用场景:vuex用于组件之间的传值,localstorage用于不同页面之间的传值

永久性: 当刷新页面时,vuex中的数据会丢失,locstorage不会。

解决vuex在页面刷新后数据丢失的问题:

js代码是运行在内存中的,代码运行时多有的方法 变量都是保存在内存中的。刷新页面时,以前申请的内存被释放,重新加载脚本代码,变量重新赋值,所以这些数据要存储必须存储在外部,例如:localstorage sessionstorage indexdb等,这些都是浏览器提供的API,可以将数据存储在硬盘上,做持久化存储。

h5提供了了,两种在客户端存储数据的新方法: localstorage没有时间期限,除非将它移除,sessionStorage即会话,当浏览器关闭时 会话结束,有时间限制;

cookie不适合大量数据的存储,因为它们由每个服务器的请求来传递,这使得cookie速度很慢,而且效率不高

localstorage的作用域是限定在稳当级别的,同源的文档共享同样的localstorage数据,它们可以相互读取对方的数据,甚至可以覆盖对方的数据,非同源的文档不能读取或者覆盖对方的数据。

需要注意的是vuex中的变量是相应式的,而sessionStorage不是,当改变vuex中的状态,组件会检测到改变,而sessionStorage不会,页面需要刷新才可以看到变化;

让vuex中的数据从sessionStorage中获取,组件就可以响应式的变化

vuex本地存储的更多相关文章

  1. vuex存储和本地存储的区别

    1.实质的区别 vuex存的是状态,存储在内存,localstorage是浏览器提供的接口,让你存的是文件,以文件的形式存储在本地 2.应用场景 vuex用于组件之间的传值,localstorage则 ...

  2. 本地存储和vuex使用对比

    1. sessionStorage sessionStorage 方法针对一个 session 进行数据存储.当用户关闭浏览器窗口后,数据会被删除. 用法: 储存: 1. 点(.)运算符        ...

  3. vue-music 关于搜索历史本地存储

    搜索历史 搜索过的关键词 保存在本地存储 localstorage 中,同时多个组件共享搜索历史数据,将数据存到vuex 中,初始值从本地缓存中取得对应key 的值,没有数据默认为空数组 点击搜索关键 ...

  4. 基于本地存储的kvm虚拟机在线迁移

    基于本地存储的kvm虚拟机在线迁移 kvm虚拟机迁移分为4种(1)热迁移基于共享存储(2)热迁移基于本地存储(3)冷迁移基于共享存储(4)冷迁移基于本地存储 这里介绍的是基于本地存储的热迁移 动态块迁 ...

  5. HTML5 localStorage本地存储

    介绍 localStorage(本地存储)的使用方式.包括对存储对象的添加.修改.删除.事件触发等操作. 目录 1. 介绍 1.1 说明 1.2 特点 1.3 浏览器最小版本支持 1.4 适合场景 2 ...

  6. HTML5笔记:跨域通讯、多线程、本地存储和多图片上传技术

    最近做项目在前端我使用了很多新技术,这些技术有bootstrap.angularjs,不过最让我兴奋的还是使用了HTML5的技术,今天我想总结一些HTML5的技术,好记性不如烂笔头,写写文章可以很好的 ...

  7. HTML5 学习总结(三)——本地存储

    一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...

  8. Javascript本地存储小结

    前言 总括:详细讲述Cookie,LocalStorge,SesstionStorge的区别和用法. 人生如画,岁月如歌. 原文博客地址:Javascript本地存储小结 知乎专栏&& ...

  9. H5 本地存储一

    localStorage(本地存储),可以长期存储数据,没有时间限制,一天,一年,两年甚至更长,数据都可以使用.sessionStorage(会话存储),只有在浏览器被关闭之前使用,创建另一个页面时同 ...

随机推荐

  1. 反射 type 的基本用法,动态加载插件

    这里介绍反射的简单实用 MyClass类 public class MyClass { public int Age { get; set; } public string Name { get; s ...

  2. hibernate session缓存

    Session 概述 Session 接口是 Hibernate 向应用程序提供的操纵数据库的最基本的接口, 它提供了基本的保存, 更新, 删除和载入 Java 对象的方法. Session 具有一个 ...

  3. 更改 vux Tabbar TabbarItem标题下方的文字激活时的颜色

    步骤一: 打开文件build/webpack.base.conf.js, 找到modeule.exports = vuxLoader, 修改如下(并保存) module.exports = vuxLo ...

  4. C++11 并发指南四(<future> 详解一 std::promise 介绍)(转)

    前面两讲<C++11 并发指南二(std::thread 详解)>,<C++11 并发指南三(std::mutex 详解)>分别介绍了 std::thread 和 std::m ...

  5. solaris软件管理 FTP

    安装一些常用软件 一.应用程序与系统命令的关系: 系统命令文件位置在 /bin /sbin下面或为shell内部指令:完成对系统的基本管理工作:一般在字符操作界面中运行:一般包括命令字.命令选项和命令 ...

  6. pandas-数据分析

    pandas是一个强大的python数据分析的工具包 pandas是基于numpy构建的 pandas的主要功能: 具备对其功能的数据结构DataFrame.Series 集成世间序列功能 提供丰富的 ...

  7. 转_【大话IT】你离大数据架构师有多远?

    话题背景: 首先,先科普下“数据架构师”的相关职责:数据架构师要负责建立和维持公司数据储存的技术基准,策划硬体和软体的结构,确保数据储存系统可以支持未来的数据量和分析需求. 据了解,美国地区数据架构师 ...

  8. teradata培训文档 相关索引

    teradata培训文档 http://wenku.baidu.com/view/ec44c201cc175527072208ba.html Teradata 和Greenplum 的讨论 http: ...

  9. Cisco策略路由(policy route)精解(转载)

    原文:http://www.guanwei.org/post/Cisconetwork/07/Cisco-policy-route_8621.html 注:PBR以前是CISCO用来丢弃报文的一个主要 ...

  10. C#高级编程七十五天----C#使用指针

    在C#中使用指针的语法 假设想在C#中使用指针,首先对项目进行过配置: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/font ...