使用localstorage来存储页面信息

Posted 爱喝酸奶的吃货

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用localstorage来存储页面信息相关的知识,希望对你有一定的参考价值。

     今天小颖在跟着慕课网学习vue,不学不知道,一学吓一跳,学了才发现,我之前知道的只是vue的冰山一角,嘻嘻,今天把小颖跟着慕课网学习的demo,给大家分享下,希望对大家有所帮助嘻嘻。

环境搭建:

参考:vue API

       vue2.0+element+node+webpack搭建的一个简单的后台管理界面

详情:

npm install --global vue-cli

 vue init webpack vue-project

然后:

cd vue-project

npm install    如果你配置了淘宝镜像,也可以用cnpm install

npm run dev

我们就在浏览器看到:

 

 但我们最终要实现:

如何实现如图的效果呢?

1.将App.vue修改为:

<template>
  <div id="app">
    <div class=\'vue-demo\'>
      <input type="text" class="txt" v-model=\'newItem\' @keyup.enter=\'addItemFun\'>
      <ul>
        <li v-for="its in items">{{its.name}}</li>
      </ul>
    </div>
  </div>
</template>
<script>
import store from \'./store\'
export default {
  name: \'app\',
  data() {
    return {
      newItem: \'\',
      items: store.fetch()
    }
  },
  watch: {
    items: {
      handler: function(val, oldVal) {
        store.save(val);
      },
      deep: true
    }
  },
  methods: {
    addItemFun() {
      var _this = this;
      _this.items.push({ \'name\': _this.newItem });
      _this.newItem = \'\';
    }
  }
}

</script>
<style>
#app {
  font-family: \'Avenir\', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.vue-demo {
  width: 400px;
  margin: 0 30px;
}

.txt {
  width: 200px;
  height: 25px;
  line-height: 24px;
  border-radius: 5px;
}

</style>

对于初学vue的同学,可能对于watch可能不太熟悉,那就麻烦大家移步到 vue API 或参考下小颖之前写的文章:vue——实例方法 / 数据

2.在与App.vue同级目录下,新建store.js文件:

const STORAGE_KEY = \'todos-vuejs\'

export default {

  fetch: function() {

    return window.JSON.parse(window.localStorage.getItem(STORAGE_KEY) || \'[]\')

  },

  save: function(items) {

    window.localStorage.setItem(STORAGE_KEY, window.JSON.stringify(items))

  }

}

3.在项目中打开cmd窗口,运行:npm run dev,就完成啦嘻嘻。

 

以上是关于使用localstorage来存储页面信息的主要内容,如果未能解决你的问题,请参考以下文章

localStorage的使用

使用 Localstorage 将 javascript 变量从一个 html 页面存储和检索到另一个 (DOM)

session,cookie,sessionStorage,localStorage的相关设置以及获取删除

超越cookie - 使用DOM sessionStorage和localStorage来保存更多信息

后台返回完整的HTML页面代码,如何打开展示

vuex本地存储