vue-留言板+localStorage+node后台留言板

提交留言后显示在当前界面，存储在本地localStorage，保证下次加载不丢失。
重要知识点：localStorage的使用。

前端留言板

//html部分，注意显示留言循环调用数组即可
    <p>内容：
        <input type="text" name="msg" v-model="newMsg">
    </p>
   <input type="button" value="提交" @click="addMsg">
        <button @click="removeMsg">清除</button>
    <ul>
        <li v-for="msg in msgs"></li>
    </ul>

//localStorage部分,封装起来统一使用
var STORAGE = 'liuyanban';//设定一个存储空间，只是为了方便。不然就得localStorage.setItem('liuyanban','xxx'),其中xxx为数组或对象，但需要做字符串转化处理。
var msgStorage = {
    save(msgs) {  //有msgs变化即调用存储
        localStorage.setItem(STORAGE,JSON.stringify(msgs));//必须转化为字符串！
    },
    fetch() {
        var msgs = JSON.parse(localStorage.getItem(STORAGE));//msgs直接存入localStorage,显示的话调用localStorage中的msgs
        return msgs;
    },
    clear() {  //清除localStorage
        localStorage.removeItem(STORAGE)
    }
}

//调用存储部分
data:{msgs:msgStorage.fetch()}
watch:{
    msgs:{
        handle(msgs){
            msgStorage.save(msgs)
        }
    }
}
methods:{
    addMsg(){
        if(this.newMsg === "") return;
        this.msgs.push({title:this.newMsg}) //msgs有变化，故调用save存储
    },
    removeMsg(){  //清理显示和localStorage两部分
        this.msgs = [];
        msgStorage.clear(); //如果调用localStorage就全部清除了= =
    }
}

关于localStorage

存储路径在C:/用户/AppData下面。
chrome分配存储空间5M，整个子域共享,即www.baidu.com/下的任何域名都共享该空间。
常用的基本就是上述使用的API：
setItem getItem removeItem :key value
length
key(i) 获取第i个数据的key
clear(清除全部存储数据,剩余的只有这几个API)
清除后看了下自己电脑控制台：

for(var i in localStorage) {
    console.log(i);
}

另，统计界面刷新次数也可以使用这，每次重载innerHTML写入时getItem后数字加1即可。

if(!localStorage.getItem('number')) {localStorage.setItem()}
localStorage.number = parseInt(localStorage.getItem('number')) + 1;
console.log(localStorage.number);

node服务器端留言板

require模块：http url querystring
俩路径通过pathname判断。
/message
写入form表单，即res.write(form)
/messageok
写入form中输入的文本，即
req.on(‘data’,(chunk)=>{
body += chunk;
})
req.on(‘end’,()=>{
console.log(qs.parse(body));
res.end(‘over’); //网页显示over，命令行显示提交的内容
})