如何让Vue支持本地存储?

这里我写一个最简单的例子,方便你扩展

存放目录

本地存储插件 localstorage.js 我放到了plugins下

组件搭建

创建存储关键字

const STORE_KEY = 'STORE-KEY';

创建初始化函数和存储方法

export default{
  data:null,
  install: function(Vue) {
    this.data = JSON.parse(window.localStorage.getItem(STORE_KEY)) || {};
    if(this.data==null){
      this.data = {};
    }
    Vue.prototype.$local = this;
    // this.clearItems();
  },
  save(){
    window.localStorage.setItem(STORE_KEY, JSON.stringify(this.data))
  },
}

启用

/**本地存储 */
import local from "./plugins/localstorage"
Vue.use(local);

使用

在任意当前模版下调用

this.$local.save()
  • 其他函数可自行扩展
  • 这里将对象进行json序列化,读取的时候从json中还原回去
  • 存储方法可以在router中写明,在切换页面时存储
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,315评论 0 3
  • 33、JS中的本地存储 把一些信息存储在当前浏览器指定域下的某一个地方(存储到物理硬盘中)1、不能跨浏览器传输:在...
    萌妹撒阅读 2,112评论 0 2
  • 一:什么是闭包?闭包的用处? (1)闭包就是能够读取其他函数内部变量的函数。在本质上,闭包就 是将函数内部和函数外...
    xuguibin阅读 9,740评论 1 52
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,741评论 1 45
  • vue-cli搭建项目 确保安装了node与npm 再目标文件夹下打开终端 执行cnpm i vue-cli -g...
    Akiko_秋子阅读 3,278评论 1 22