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>

这篇关于Vue本地存储（cookie、sessionStorage，localStorage）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---