???? 今天小穎在跟著慕課網學習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,就完成啦嘻嘻。

?

轉載于:https://www.cnblogs.com/yingzi1028/p/7774954.html

總結

以上是生活随笔為你收集整理的使用localstorage来存储页面信息的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。