vue 项目中常用的三种数据存储
1. Cookies 存储
    介绍:
        老技术、指定有效期、不能跨域(浏览器,网站,路径)
        cookie会跟随http协议发往后台,cookie最好处于服务器环境中使用
        只能存文本、大小限制约4K、数量限制约50条
        
    1.1 vue + javascript

安装: npm install --save js-cookie
main.js
  import Cookies from 'js-cookie' // 引入
  Vue.prototype.$Cookies = Cookies // 注册全局引用
使用:
  存: this.$Cookies.set('key', 'value')
  区: this.$Cookies.get('key')

1.2 vue + typescript

安装:
  npm install --save @types/js-cookie
  npm install --save js-cookie
main.ts
  import Cookies from 'js-cookie' // 引入
  Vue.prototype.$Cookies = Cookies // 注册全局引用
使用:
  注册:private $Cookies: any
  存: this.$Cookies.set('key', 'value')
  区: this.$Cookies.get('key')

2. Storage 存储
    介绍:
        HTML5规范中新增的本地存储
        分为 localStorage 与 sessionStorage
        自身是个对象,直接属于window
        只能存字符、不能跨域(浏览器,网站)、不安全性
        
 2.1 localStorage

只能永久,需要手动清除
存储:window.localStorage.setItem(name, JSON.stringify(obj))
读取:window.localStorage.getItem(name)
删除:window.localStorage.removeItem(name)
清空:window.localStorage.clear()

2.2 sessionStorage

只能会话级(关闭浏览器自动清除)
存储:window.sessionStorage.setItem(name, JSON.stringify(obj))
读取:window.sessionStorage.getItem(name)
删除:window.sessionStorage.removeItem(name)
清空:window.sessionStorage.clear()-

3. Vuex 存储
    介绍:
        数据共享状态,vue配套数据存储
    使用介绍:
        https://blog.csdn.net/kangkang_style/category_8555189.html

Logo

前往低代码交流专区

更多推荐