最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

cookies、sessionStorage与localStorage在Vue中的使用

来源：博客园
目录
  • 简介
  • localStorage的使用
    • 语法
    • 示例
  • sessionStorage的操作
    • 语法
    • 示例
  • cookie的操作
    • vue-cookie
      • 语法
      • 示例
    • vue-cookies
      • 语法
      • 示例
    • js-cookie的使用

简介

  1. cookies 临时存储在客户端中，并且有过期事件，到过期时间会被自动清理。
  2. sessionStorage 临时存储在客户端中，关闭浏览器后就会清空。
  3. localStorage 永久存储在客户端中，只有在清空缓存或手工删除或代码删除后才会清空。

localStorage的使用

语法

// 将值写入到用户浏览器中// 普通字符串可以直接写入localStorage.setItem("存储在浏览器中的键", 存储在浏览器中的值)// 如果是对象或者是数组，需要转换成json格式字符串localStorage.setItem("存储在浏览器中的键", JSON.stringify("值"))// 获取用户浏览器中的localStorage保存的值localStorage.getItem("存储在用户浏览器中的键")  // 键是在setItem阶段定义的// 清除浏览器中的localStorage的值localStorage.clear()                              // 清除所有localStorage.removeItem("存储在用户浏览器中的键")   // 按键清除，键是在setItem阶段定义的

示例

<script>export default {  name: "HomeView",  data() {    return {      username: "",      password: "",      userinfo: {name: "jason", age: 18}    }  },  methods: {    // 添加localStorage到用户浏览器中的事件    addLocalStorage() {      // value必须是字符串，如果是对象或者是数组，需要转换成json格式字符串      localStorage.setItem("info", JSON.stringify(this.userinfo))      // 正式环境中不可能将用户名密码放在里面的，有安全隐患，这里只是做演示使用      localStorage.setItem("name", this.username)      localStorage.setItem("pwd", this.password)    },    // 查看localStorage的事件    checkLocalStorage() {      var userinfo = localStorage.getItem("info")      var username = localStorage.getItem("name")      var password = localStorage.getItem("pwd")      alert("userinfo:", userinfo, "username:", username, "password:", password)    },    // 删除用户浏览器中的localStorage    delLocalStorage(){      // 清除所有      localStorage.clear()      // 清除一个指定的键      localStorage.removeItem("info")    }  }}</script>

显示效果如下

sessionStorage的操作

操作与localStorage大致相同

语法

// 将值写入到用户浏览器中// 普通字符串可以直接写入sessionStorage.setItem("存储在浏览器中的键", 存储在浏览器中的值)// 如果是对象或者是数组，需要转换成json格式字符串sessionStorage.setItem("存储在浏览器中的键", JSON.stringify("值"))// 获取用户浏览器中的sessionStorage保存的值sessionStorage.getItem("存储在用户浏览器中的键")  // 键是在setItem阶段定义的// 清除浏览器中的sessionStorage的值sessionStorage.clear()                              // 清除所有sessionStorage.removeItem("存储在用户浏览器中的键")   // 按键清除，键是在setItem阶段定义的

示例

<script>export default {  name: "HomeView",  data() {    return {      username: "",      password: "",      userinfo: {name: "jason", age: 18}    }  },  methods: {    // 添加localStorage到用户浏览器中的事件    addSessionStorage() {      // value必须是字符串，如果是对象或者是数组，需要转换成json格式字符串      sessionStorage.setItem("info", JSON.stringify(this.userinfo))      // 正式环境中不可能将用户名密码放在里面的，有安全隐患，这里只是做演示使用      sessionStorage.setItem("name", this.username)      sessionStorage.setItem("pwd", this.password)    },    // 查看localStorage的事件    checkSessionStorage() {      var userinfo = sessionStorage.getItem("info")      var username = sessionStorage.getItem("name")      var password = sessionStorage.getItem("pwd")      alert("userinfo:", userinfo, "username:", username, "password:", password)    },    // 删除用户浏览器中的localStorage    delSessionStorage(){      // 清除所有      // sessionStorage.clear()      // 清除一个指定的键      sessionStorage.removeItem("info")    }  }}</script>
  • 下如图所示

cookie的操作

vue中操作cookie不能直接操作，需要借助第三方工具：vue-cookie或vue-cookies或js-cookie,它们的使用方法不同

  1. 安装vue-cookie
cnpm install vue-cookie
  1. 导入使用vue-cookie
<script>// 别名自定义即可import 别名 from "vue-cookie"</script>

语法

import cookie from "vue-cookie"// 设置cookiecookie.set("键", 值, 过期时间)  // 如果过期时间不填写，则关闭浏览器就会删除，时间是以天为单位// 如果是对象或者是数组，需要转换成json格式字符串cookie.set("存储在浏览器中的键", JSON.stringify("值"))// 查询cookiecookie.get("存储在浏览器中的键")// 删除cookiecookie.delete("存储在浏览器中的键")

示例

<script>import cookie from "vue-cookie"export default {  name: "HomeView",  data() {    return {      username: "",      password: "",      userinfo: {name: "jason", age: 18}    }  },  methods: {    // 添加localStorage到用户浏览器中的事件    addCookie() {      // value必须是字符串，如果是对象或者是数组，需要转换成json格式字符串      cookie.set("info", JSON.stringify(this.userinfo),1)      // 正式环境中不可能将用户名密码放在里面的，有安全隐患，这里只是做演示使用      cookie.set("name", this.username)      cookie.set("pwd", this.password)    },    // 查看localStorage的事件    checkCookie() {      var userinfo = cookie.get("info")      var username = cookie.get("name")      var password = cookie.get("pwd")      alert("userinfo:", userinfo, "username:", username, "password:", password)    },    // 删除用户浏览器中的localStorage    delCookie(){      // 清除一个指定的键      cookie.delete("infor")    }  }}</script>
  • 如图所示

vue-cookies

  1. 安装vue-cookies
cnpm install vue-cookies -S
  1. 导入vue-cookies，需要在main.js中引入
import cookies from "vue-cookies"Vue.use(cookies)

语法

前提是已经在main.js中引入了

this.$cookies.set(keyName, value,time,path,domain,secure)  //KeyName是cookie的键，value是对应的值，time为何时自动删除(默认单位是秒，可以用算式比如60*60)，path为存放路径，domain为域名，secure为是否要以安全的方式传输// vue-cookies的时间格式this.$cookies.set("test", "{a:1,b:2}",-1)  //永不删除this.$cookies.set("test", "{a:1,b:2}",60)  //一分钟后删除this.$cookies.set("test", "{a:1,b:2}","10s")  //10秒后删除this.$cookies.set("test", "{a:1,b:2}",new Date(2019,9,13).toUTCString())  //2019年10月13日删除，new Date月份设置是从0开始的this.$cookies.set("username",response.data.username, "7d");  // 7天后删除// 判断本地是否有此cookiethis.$cookies.isKey(keyName)// cookie的获取this.$cookies.get(keyName)   //KeyName就是设置的cookie的名字，vue-cookie会将cookie自动转为json对象格式// cookie的删除this.$cookies.remove(keyName)

示例

<script>import cookies from "vue-cookies"export default {  name: "HomeView",  data() {    return {      username: "",      password: "",      userinfo: {name: "jason", age: 18}    }  },  methods: {    // 添加localStorage到用户浏览器中的事件    addCookie() {      // value必须是字符串，如果是对象或者是数组，需要转换成json格式字符串      this.$cookies.set("info", JSON.stringify(this.userinfo))      // 正式环境中不可能将用户名密码放在里面的，有安全隐患，这里只是做演示使用      this.$cookies.set("name", this.username)      this.$cookies.set("pwd", this.password)    },    // 查看localStorage的事件    checkCookie() {      var userinfo = this.$cookies.get("info")      var username = this.$cookies.get("name")      var password = this.$cookies.get("pwd")      alert("userinfo:", userinfo, "username:", username, "password:", password)    },    // 删除用户浏览器中的localStorage    delCookie() {      // 清除一个指定的键      this.$cookies.remove("infor")    }  }}</script>

js-cookie的使用

js-cookie的使用大致与vue-cookie相同，下面只列举不同的部分

  1. 引入js-cookie
import jsCookie from "js-cookie"Vue.prototype.$cookie = jsCookie;
  1. 设置cookie
this.$cookie.set("itemKey", "itemValue", { expires: 7});// 第三个对象是一个键值对，可以设置需要的cookie的属性expires : 定义有效期。如传入Number，则单位为天，也可传入一个Date对象，表示有效期至Date指定时间。默认情况下cookie有效期截止至用户退出浏览器。path : string，表示此 cookie 对哪个地址可见。默认为”/”。domain : string，表示此 cookie 对哪个域名可见。设置后 cookie 会对所有子域名可见。默认为对创建此 cookie 的域名和子域名可见。secure : true 或 false，表示 cookie 传输是否仅支持 https。默认为不要求协议必须为 https。
  1. 其它与vue-cookie的方法相同，不再列举

关键词：