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

--localStorage和sessionStorage

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

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

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

基本使用方法

//两者使用方法相似
//存储数据
localStorage.setItem('存储名字',存储数据)
//取数据
localStorage.getItem('存储名字')
//删除存储数据
localStorage.removeItem('存储名字')
//更新数据,方法就是使用原名字重新存储
localStorage.setItem('原存储名字', 新存储数据)

--Vuex

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

你可能感兴趣的:(Vue中存储数据方法:localStorage、sessionStorage和Vuex的区别和简单使用)