Cookie localStorage sessionStorage区别和使用

Cookie

1. Cookie是什么：指某些网站存储在用户本地终端的数据
   作用理解：登陆一个网站，保存了数据，近期不用再登录
   应用层面来说：cookie是一段字符串；
   js层面来说：cookie是document对象下的一个String类型的属性
   查看cookie：document.cookie

2. Cookie的三个关键
   

3. 设置和获取cookie

• 设置cookie：直接对document.cookie赋值（key不同不会覆盖）
  通过 path 参数，您可以告诉浏览器 cookie 属于什么路径。默认情况下，cookie 属于当前页
  document.cookie = “username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/”;

• 获取cookie：因为cookie是个字符串，所以只能对字符串进行分析

• 修改cookie：通过使用 JavaScript，你可以像你创建 cookie 一样改变它：旧 cookie 被覆盖。

• 删除cookie：删除 cookie 时不必指定 cookie 值：

  直接把 expires 参数设置为过去的日期即可：

  document.cookie = “username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;”;

  您应该定义 cookie 路径以确保删除正确的 cookie。如果你不指定路径，一些浏览器不会让你删除 cookie。

• cookie使用场景：用户登录状态保持
  

webStorage

webStorage是一个对象
1）webstorage是本地存储，存储在客户端，包括localStorage和sessionStorage

2）localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信

3）sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。源生接口可以接受，亦可再次封装来对Object和Array有更好的支持

• window.localStorage

• 保存数据语法：

  localStorage.setItem(“key”, “value”);

• 读取数据语法：

  var lastname = localStorage.getItem(“key”);

• 删除数据语法：

  localStorage.removeItem(“key”);

localstorage保存网页数据-demo（评论）

<template>
<div>
    <div>                    
	    <label for="">评论人：</label>                    
	    <input type="text" v-model="user1">            
    </div>             
    <div>                     
	    <label for="">评论内容：</label>                     
	    <input type="text" v-model="content1">             
    </div>             
    <div>                    
    	<input type="button" value="发表评论" @click="postContent">             
    </div>    
    <ul>                    
	    <li v-for="item in list" :key="item.id">                        
	    <span>{{item.content}}</span>                        
	    <span>评论人：{{item.user}}</span>                    
	    </li>           
    </ul>
 </div>
</template>
    <script>
    export default{    
	    data(){       
	     return{        
	     	list:[           
	      		{user:"111",content:"111"},      
	        ],       
	        user1:"",       
	        content1:"",       
	        }  
	    },   
	   created(){                  
             this.loadComments()      
             //调用data里的数据和methods里的方法都需要用this.                    
            },     
    	  methods: {                     
              postContent(){//  评论的方法    
              //分析评论的业务逻辑   
              // 1.评论数据：发表存到哪？？存放在localStorage中    
              // 2.先组织一个最新的评论对象   
              // 3.想办法，把第二步中，得到的评论对象，保存到localStorage中   
              // 3.1 localStorage只支持存放字符串数据,要先调用JSON.stringify   
               // 3.2 在保存 最新的 评论数据之前，要先从localstorage获取到之前的评论（string）   
               //转换为 一个 数组对象，然后，把最新的评论，push到这个数组    
               // 3.3如果获取到的localstorage中的 评论字符串，为空不存在，    
               //则可以返回一个'[]',让JSON.parse去转换    
               //3.4把 最新的 评论列表数组，再次调用 JSON.stringify 转为数组字符串，    
               // 然后调用localstorage.setItem()                
               var comment={user:this.user1,content:this.content1}            
               // 从localStorage中获取所有的评论   
                // this.list=JSON.parse(localStorage.getItem('cmts')||('[]'))                
               this.list.unshift(comment)           
                // 重新保存最新的 评论数据                
		localStorage.setItem('cmts',JSON.stringify(this.list))                      		
		this.user1=this.content1=''    
		// console.log(this.list)  
		},    
		loadComments(){                 
		var list=JSON.parse(localStorage.getItem('cmts'))                 
		this.list=list     
		},
	}
}
</script>