Vue中存储数据方法:localStorage、sessionStorage和Vuex的区别和简单使用

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue中存储数据方法:localStorage、sessionStorage和Vuex的区别和简单使用相关的知识,希望对你有一定的参考价值。

参考技术A

localStorage和sessionStorage都是通过键值对的方式进行存储,用于不同页面之间传值 (注意:它们都只接受存储字符串类型的数据,若遇到json格式的数据需要使用JSON.stringify()将数据转化为字符串类型) ,区别在于:

1、sessionStorage:用于短期存储,当浏览器关闭之后sessionStorage中存储的数据就会被清除,浏览器不关闭仅关闭网页数据不删除。

2、localStorage:用于长期存储,当浏览器关闭之后localStorage存储的内容不会被清除,数据一直存储在本地。

vuex常被用于两个组件进行数据交互时,如一个组件修改了某一个数据,需要另一个组件也同步这个更改,而localStorage和sessionStorage无法同步更改,这时就需要使用vuex来达到这个目的。

vue中 localStorage的使用方法(详解)

vue中实现本地储存的方法:localStorage,在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同。

(1).储存数据

localStorage.setItem(accessToken, Bearer  + response.data.result.accessToken)

 

(2).取出数据

localStorage.getItem(accessToken)

 

(3).删除储存数据

 localStorage.removeItem(accessToken)

 

(4).更改数据

 
localStorage.setItem(accessToken, 更改后 + response.data.result.accessToken)

 

使用时有两点需要注意过的地方:

. localStorage在浏览器的隐私模式下面是不可读取的。
. localStorage本质上是对字符串的读取,有json格式时需要JSON.stringify()转化为字符串。
. localStorage不能被爬虫抓取到



 
 
 

以上是关于Vue中存储数据方法:localStorage、sessionStorage和Vuex的区别和简单使用的主要内容,如果未能解决你的问题,请参考以下文章

vue.js存储--localStorage

vue中 localStorage的使用方法(详解)

vue中操作localstorage

vue项目数据本地存储

Vue.JS - 如何在 Vue.JS 中使用 localStorage

vue项目常用之三:window.localStorage持久化存储数据封装