h5的localStorage 和cookie的区别
-
localStorage的存储容量比cookie更大；
-
cookie作为http规范的一部分，它的主要作用是与服务器进行交互，使http保持连接状态。也就是你每次请求一个新的页面的时候，cookie都会被发送过去，这样无形中就浪费了宽带。
-
cookie保存是能指定可以访问该cookie的范围；localStorage的访问范围就是当前整个网站，不存在访问范围这个概念。且，两者都不支持跨域调用。
-
html5中的Web Storage包括了两种存储方式： sessionStorage和localStorage；
-
sessionStorage用于本地存储一个会话的数据，当会话结束时，存储的数据也会自动销毁（即当页面关闭的同时也销毁数据），因此，sessionStorage不是一个持久化的本地存储，仅仅是会话级别的存储。
-
localStorage用于持久化的本地存储，除非手动删除数据，否则会一直保存
localStorage的一些方法
添加键值对： localStorage.setItem(key,value);
获取键值对： localStorage.getItem(key);
删除键值对： localStorage.removeItem(key);
清除所有键值对： localStorage.clear();
获取localStorage的属性名称（键名称）： localStorage.key(index);
获取localStorage中保存的键值对的数量： localStorage.length;Vue 评论案例
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id='app'>
<addinfo @func='show'></addinfo>
<ul class="list-group" >
<div v-for='(item,index) in person' :key='index'>
<li class="list-group-item">{{item.say}}
<span class="badge">{{item.dataTime}}</span>
<span class="badge">{{item.name}}</span>
</li>
</div>
</ul>
</div>
<template id='add'>
<div class="form-group">
<div class="form-group">
姓名<input type="text" class="form-control" v-model='name1'>
名句<input type="text" class="form-control" v-model='say1'>
</div>
<button class="btn btn-primary" @click='addfun' >添加</button>
</div>
</template>
<script>
var vm = new Vue({
el:'#app',
data:{
person:[
{name:'李白',say:'天生我才必有用',dataTime:new Date()},
{name:'杜甫',say:'吹风吹又生',dataTime:new Date()},
{name:'曹植',say:'本是同根生',dataTime:new Date()}
]
},
mounted:function(){
this.show();
},
methods:{
show(){
this.person=JSON.parse(localStorage.getItem('info')||'[]')
}
},
components:{
'addinfo':{
template:'#add',
data(){
return {
name1:'',
say1:''
}
},
methods:{
addfun(){
var info = {name:this.name1,say:this.say1,dataTime:new Date()}
var buff = JSON.parse(localStorage.getItem('info')||'[]');
buff.push(info);
localStorage.setItem('info',JSON.stringify(buff))
this.say1=this.name1='';
this.$emit('func');
}
}
}
}
})
</script>
</body>
</html>