vuex存储和本地存储(localstorage、sessionstorage)的区别

1. sessionStorage

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

  用法:

    储存: 1. 点(.)运算符                          sessionStorage.lastname = ‘JSAnntQ‘;

        2. 方括号([ ])运算符                 sessionStorage[‘lastname‘] = ‘JSAnntQ‘;

        3. localStorage.setItem      sessionStorage.setItem("lastname", "JSAnntQ"); 

    

    

    储存: 1. 点(.)运算符                          sessionStorage.lastname

        2. 方括号([ ])运算符                 sessionStorage[‘lastname‘]

        3. localStorage.getItem                sessionStorage.getItem("lastname"); 

2. localStorage

  localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。

  用法:

    储存: 1. 点(.)运算符                          localStorage.lastname = ‘JSAnntQ‘;

        2. 方括号([ ])运算符                 localStorage[‘lastname‘] = ‘JSAnntQ‘;

        3. localStorage.setItem      localStorage.setItem("lastname", "JSAnntQ"); 

    

    

    储存: 1. 点(.)运算符                          localStorage.lastname

        2. 方括号([ ])运算符                 localStorage[‘lastname‘]

        3. localStorage.getItem                localStorage.getItem("lastname");

3. vuex

  Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

  用法: https://vuex.vuejs.org/zh/

4. 总结

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

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

3.永久性:当刷新页面(这里的刷新页面指的是 --> F5刷新,属于清除内存了)时vuex存储的值会丢失,sessionstorage页面关闭后就清除掉了,localstorage不会。

注:很多同学觉得用localstorage可以代替vuex, 对于不变的数据确实可以,但是当两个组件共用一个数据源(对象或数组)时,如果其中一个组件改变了该数据源,希望另一个组件响应该变化时,localstorage,sessionstorage无法做到,原因就是区别1。

总结来源: https://www.cnblogs.com/zifayin/p/7524805.html

原文地址:https://www.cnblogs.com/zouwangblog/p/10984145.html

时间: 2024-08-28 20:22:00

vuex存储和本地存储(localstorage、sessionstorage)的区别的相关文章

OTPUB知识课堂:云存储和本地存储之间的区别

1. 本地存储是指将数据存放到本地磁盘.或移动硬盘.U盘.光盘等存储设备上. 通俗来说就是把自己的数据如文档.视频.图片.音乐等,存到到自己的电脑上.或存放到移动硬盘.U盘.光盘上. 2. 云存储是一种新兴的网络存储技术,是指通过集群应用.网络技术或分布式文件系统等功能,将网络中大量各种不同类型的存储设备通过应用软件集合起来协同工作,共同对外提供数据存储和业务访问功能的一个系统.是一种新的商业模式,让用户自由选择,按需购买,灵活扩充存储空间大小.比如现在常见的网盘.云盘. 通说来说是就是将自己的

一文告知云存储与本地存储哪一个更适合你

在过去的五年中,云技术飞速发展,借助基于云的应用程序,灾难恢复计划和数据存储,云为希望提高效率和灵活性的企业提供了一种新架构.然而,新出现的并不是最好的,虽然云存储为许多企业带来很多好处,但一些企业发现使用本地存储或混合,混合是一种更有效的解决方案,鉴定云存储与本地存储的优势是根据企业业务的重要部门来判定. 一.云存储与本地存储:什么是什么? 让我们从基础开始. 云存储:是将数字数据存储在跨越多个服务器和位置的在线空间中的过程,通常由托管公司维护. 本地存储:是将数字数据存储在物理存储设备(如硬

localStorage,sessionStorage,cookie区别

localStorage:HTML5新增的在浏览器端存储数据的方法.设置和获取localStorage的方法: 设置: localStorage.name = 'zjj'; 获取: localStorage.name //zjj sessionStorage: HTML5新增的在浏览器端存储数据的方法,设置和获取sessionStorage的方法: 设置: sessionStorage.name = 'zjj'; 获取: sessionStorage.name //zjj cookie:浏览器和

HTML5学习笔记之客户端存储数据方法:localStorage(),sessionStorage()

HTML5提供了两种在客户端存储数据的新方法: localStorage():没有时间限制的数据存储 sessionStorage():针对一个session的数据存储 下面的一个例子用localStroage()方法对用户访问页面的次数进行计数 <script type="text/javascript"> if(localStorage.pagecount) { localStorage.pagecount=Number(localStorage.pagecount)+

Android 存储(本地存储 SD卡存储 SharedPreference SQLite ContentProvider)

本文出自:http://blog.csdn.net/dt235201314/article/details/73176149 源码下载欢迎Star(updating):https://github.com/JinBoy23520/CoderToDeveloperByTCLer 一丶慨述 本周的学习内容是Android存储,要求:数据库Sqlite相关操作,常用的文件存取方式,以及实用场景学习,主要学习Sqlite,SD卡文件操作,SharedPreference 二丶效果演示:         

cookie,localStorage,sessionStorage的区别

一.概念 Cookie 什么是Cookie —— Cookie 是一些数据, 存储于你电脑上的文本文件中. localStorage 什么是 localStorage —— localStorage 是指将信息数据存储在客户端本地的硬件上,即使浏览器被关闭了,信息数据同样存在 sessionStorage 什么是 sessionStorage —— sessionStorage 是指将信息数据存储在session对象中,所以当浏览器关闭后,sessionStorage也随之清空 二.如何使用(一

HTML5本地存储localStorage与sessionStorage

在最近的项目中用到了html5的本地存储,下面总结一下. 1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(application cache) indexedDB 和 webSQL 2.localStorage && sessionStorage 过期时间:localStorage 永久存储,永不失效除非手动删除 sessionStorage 浏览器重新打开后就消失了 大小:每个域名是5M. 注:cookie一

html5本地存储(localStorage)使用介绍

1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(application cache) indexedDB 和 webSQL 2.localStorage && sessionStorage 过期时间:localStorage 永久存储,永不失效除非手动删除 sessionStorage 浏览器重新打开后就消失了 大小:每个域名是5M 3.localStorage API和sessionStorage API一致

H5笔记——locaStorage和sessionStorage本地存储的一些坑

当使用window.localStorage或者window.sessionStorage 存储json数据时需要将json数据用JSON.stringify(data)转换成json字符串再存储在本地存储,否侧直接存储json数据,下次使用时用 JSON.parse(data)无法转换成json对象. 因为如果直接存储json数据的格式到本地存储,那么下次用的时候打印出来的数据直接是[object Object]而不是正确的string