个人技术分享

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

简介

• cookie：登录信息存储在cookie中，有过期时间，过期后即失效
• sessionStorage：存储在浏览器，浏览器关闭后失效
• localStorage：永久生效，除非清除浏览器缓存或者删除代码

增删查

• sessionStorage：
  • 添加：sessionStorage.setItem('name', '张三')
  • 查询：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>