LocalStorage, sessionStorage, cookie
三者属于 window 对象
LocalStorage(永久存储数据)
代码展示
#"""---------------------需要通过 JSON.stringify() JSON.parse()对数据进行转换--------------------- """
<template lang="">
<div>
<button @click="handleClick1">点我设置值</button>
<button @click="handleClick2">点我获取值</button>
<button @click="handleClick3">点我删除值</button>
</div>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
# 设置值
handleClick1(){
let person = { name: '孙悟空', addr: '花果山' }
localStorage.setItem('userInfo', JSON.stringify(person))
},
# 获取值
handleClick2() {
let userInfo = localStorage.getItem('userInfo')
console.log(userInfo, typeof userInfo);
},
# 删除值
handleClick3() {
localStorage.removeItem('userInfo')
}
},
}
</script>
sessionStorage（临时存储）
关闭当前浏览器标签页，数据就没了
代码展示
#"""---------------------需要通过 JSON.stringify() JSON.parse()对数据进行转换--------------------- """
<template lang="">
<div>
<button @click="handleClick1">点我设置值</button>
<button @click="handleClick2">点我获取值</button>
<button @click="handleClick3">点我删除值</button>
</div>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
# 设置值
handleClick1(){
let person = { name: '孙悟空', addr: '花果山' }
sessionStorage.setItem('userInfo', JSON.stringify(person))
},
# 获取值
handleClick2() {
let userInfo = sessionStorage.getItem('userInfo')
console.log(userInfo, typeof userInfo);
},
# 删除值
handleClick3() {
sessionStorage.removeItem('userInfo')
}
},
}
</script>
cookie（定时存储）
超过指定时间，数据就没了
代码展示--------------> 无需数据格式转换
第一步：
下载------> npm install vue-cookies -S
第二步：
注册------> 在《 main.js 》中， 全局注册
import VueCookies from 'vue-cookies'
Vue.use(VueCookies)
第三步：
使用：
<template lang="">
<div>
<button @click="handleClick1">点我设置值</button>
<button @click="handleClick2">点我获取值</button>
<button @click="handleClick3">点我删除值</button>
</div>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
# 设置值
handleClick1(){
let person = { name: '孙悟空', addr: '花果山' }
this.$cookies.set("userInfo", person, '7d') # 第三个参数按秒计时，无需加 " " 号
},
# 获取值
handleClick2() {
let userInfo = this.$cookies.get('userInfo')
console.log(userInfo, typeof userInfo);
console.log(userInfo.name);
},
# 删除值
handleClick3() {
this.$cookies.remove('userInfo')
}
},
}
</script>
