sessionStorage
sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。
用法:
存: //
1. 点(.)运算符 sessionStorage.lastname = 'key';
2. 方括号([ ])运算符 sessionStorage['lastname'] = 'key';
3. localStorage.setItem sessionStorage.setItem("lastname", "key");
取:
1. 点(.)运算符 sessionStorage.lastname => key
2. 方括号([ ])运算符 sessionStorage['lastname'] => key
3. localStorage.getItem sessionStorage.getItem("lastname") => key
localStorage
localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。
用法:
存:
1. 点(.)运算符 localStorage.lastname = 'key';
2. 方括号([ ])运算符 localStorage['lastname'] = 'key';
3. localStorage.setItem localStorage.setItem("lastname", "key");
取:
1. 点(.)运算符 localStorage.lastname => key
2. 方括号([ ])运算符 localStorage['lastname'] => key
3. localStorage.getItem localStorage.getItem("lastname") => key
vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,
并以相应的规则保证状态以一种可预测的方式发生变化。
store.js中定义:
export const store = new Vuex.Store({
state: {
store_id: "", //店铺ID
arr:[
{id:0,name:'店铺1',score:80},
{id:1,name:'店铺2',score:60},
{id:2,name:'店铺3',score:70},
]
},
mutations: {
//产品详情跳转店铺首页,获取到的商家ID,存入state
getStoreId(state, id) {
state.store_id = id;
},
},
getters:{//关于getters查看4.}
})
存:
this.$store.commit("getStoreId", '商家ID'); //商家ID 通过getStoreId方法 存入vuex
取:
this.$store.state.store_id => 商家ID
关于getters
关于getters
getters 我们可以理解为store仓库的一个计算属性,它的作用主要是用来派生出一些新的状态。
比如我们要把state状态的数据进行一次映射或者筛选,再把这个结果重新计算并提供给组件使用。举个例子:
getters: {
arrList:function(state){
return state.arr.map(function(item){
return item.score >=60 ? '及格':'不及格'
})
}
},
此时,getters 会暴露出一个store.getters对象,我们就可以在任何组件中使用this.$store.getters.xxx来绑定数据。
<template>
<div>
<ul>
<li v-for="(item,index) in arrList" :key="index">{{item}}</li>
</ul>
</div>
</template>
<script>
import {mapGetters} from 'vuex'
export default {
computed:{
arrList:function(){
return this.$store.getters.arrList;//通过this.$store.getters对象来访问
}
}
}
</script>
但是上面写法还是不够简便,假如我 getters 状态多的时候,就得重复这样的写法,很麻烦,也不够美观,
vuex给我们提供了另外一个方法mapGetters顾名思义就是映射多个getters。下面我们再改一下上面的代码(使用es6语法)。
getters: {
arrList:state => return state.arr.map( item => item.score >=60 ? '及格':'不及格' )
},
<script>
import {mapGetters} from 'vuex'
export default {
computed:{
...mapGetters(['arrList'])
}
}
</script>
最后如果我们想给getters属性起个别名,我们可以通过对象的形式:
<script>
import {mapGetters} from 'vuex'
export default {
computed:{
...mapGetters({
newList:'arrList'
})
}
}
</script>
区别:
1.区别:
vuex存储在内存,localstorage(本地存储)则以文件的方式存储在本地,永久保存;sessionstorage( 会话存储 ),临时保存。
localStorage和sessionStorage只能存储字符串类型,
对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理
2.应用场景:
vuex用于组件之间的传值,当应用遇到多个组件共享状态时候,即:多个视图依赖于同一个状态,不同视图的行为需要变更同一状态。
localstorage,sessionstorage则主要用于不同页面之间的传值。
3.永久性:
当刷新页面(这里的刷新页面指的是F5刷新,属于清除内存了)时vuex存储的值会丢失,
sessionstorage页面关闭后就清除掉了,localstorage不会。
注:很多同学觉得用localstorage可以代替vuex, 对于不变的数据确实可以,但是当两个组件共用一个数据源(对象或数组)时,
如果其中一个组件改变了该数据源,希望另一个组件响应该变化时,localstorage,sessionstorage无法做到,原因就是区别1。