vue 项目中常用的三种数据存储

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

最后

以上就是漂亮太阳为你收集整理的vue 项目中常用的三种数据存储的全部内容，希望文章能够帮你解决vue 项目中常用的三种数据存储所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。