Vue本地存储(cookie、sessionStorage,localStorage)
简介
- cookie:登录信息存储在cookie中,有过期时间,过期后即失效
- sessionStorage:存储在浏览器,浏览器关闭后失效
- localStorage:永久生效,除非清除浏览器缓存或者删除代码
增删查
- sessionStorage:
- 添加:
this.$cookies.set('name', '张三', '1h')
- 查询:
sessionStorage.getItem('name')
- 删除:
sessionStorage.removeItem('name')
sessionStorage.clear()
- 添加:
- localStorage:
- 添加:
localStorage.setItem("name",'李四')
- 查询:
localStorage.getItem("name")
- 删除:
localStorage.removeItem('name')
localStorage.clear()
- 添加:
- cookie:
- 添加:
this.$cookies.set("name", '陈五','1h')
- 查询:
this.$cookies.get('name')
- 删除:
$cookies.remove('name')
- 添加:
注:使用cookie需要下载vue-cookies
cnpm install vue-cookies -S
在main.js中导入
import VueCookies from 'vue-cookies' Vue.use(VueCookies)
<template>
<div class="about">
<button @click="SaveLocalStorage">存储到localStorage</button>
<button @click="GetLocalStorage">从localStorage取出</button>
<button @click="DeleteLocalStorage">删除localStorage</button>
<br>
<button @click="SaveSessionStorage">存储到localStorage</button>
<button @click="GetSessionStorage">从localStorage取出</button>
<button @click="DeleteSessionStorage">删除localStorage</button>
<br>
<button @click="SaveCookie">存储到cookie</button>
<button @click="GetCookie">从cookie取出</button>
<button @click="DeleteCookie">删除cookie</button>
</div>
</template>
<script>
export default {
name :'About',
methods:{
SaveLocalStorage(){
// 添加LocalStorage 键:name 值:张三
localStorage.setItem("name",'张三')
},
GetLocalStorage() {
// 查询LocalStorage
let name = localStorage.getItem("name")
console.log(name)
},
DeleteLocalStorage() {
// 删除LocalStorage
localStorage.removeItem('name')
localStorage.clear()
},
SaveSessionStorage() {
// 添加SessionStorage 键:name 值:李四 过期时间:1小时
sessionStorage.setItem('name', '李四', '1h')
},
GetSessionStorage() {
// 查询SessionStorage
let name = sessionStorage.getItem('name')
console.log(name)
},
DeleteSessionStorage() {
// 删除SessionStorage
sessionStorage.removeItem('name')
sessionStorage.clear()
},
SaveCookie() {
// 添加Cookie 键:name 值:陈五
this.$cookies.set("name", '陈五','1h')
},
GetCookie() {
// 查找Cookie
let name = this.$cookies.get('name')
console.log(name)
},
DeleteCookie() {
// 删除Cookie
this.$cookies.remove('name')
},
}
}
</script>