Vue本地存储（cookie、sessionStorage，localStorage）

本文主要是介绍Vue本地存储（cookie、sessionStorage，localStorage），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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() {// 查询LocalStoragelet name = localStorage.getItem("name")console.log(name)},DeleteLocalStorage() {// 删除LocalStoragelocalStorage.removeItem('name')localStorage.clear()},SaveSessionStorage() {// 添加SessionStorage 键：name 值：李四 过期时间：1小时this.$cookies.set('name', '李四', '1h')},GetSessionStorage() {// 查询SessionStoragelet name = sessionStorage.getItem('name')console.log(name)},DeleteSessionStorage() {// 删除SessionStoragesessionStorage.removeItem('name')sessionStorage.clear()},SaveCookie() {// 添加Cookie 键：name 值：陈五this.$cookies.set("name", '陈五','1h')},GetCookie() {// 查找Cookielet name = this.$cookies.get('name')console.log(name)},DeleteCookie() {// 删除Cookiethis.$cookies.remove('name')},}
}
</script>