原生js本地存储？看这一篇就够了！！！

JS cookie

1、概述

1. cookie也叫HTTP Cookie，最初是客户端与服务器端进行会话（Session)使用的。
2. 如果没写expires,那么下次打开网页，cookie就会消失，这个就是会话机制

2、格式

1. name=value; [expires=date]; [path=path]; [domain=somewhere.com];
   [secure]
2. encodeURIComponent函数可以：将文本字符串编码为一个统一资源标识符 (URI) 的一个有效组件
3. 上面的方法主要用于协议、主机名、路径或查询字符串

3、封装函数

设置cookie

function setCookie(name,value,day,path){
	var cookieText=encodeURIComponent(name)+"="+encodeURIComponent(value);		//encodeURIComponent
	if(day>0){
		var myDate=new Date();
		myDate.setDate(myDate.getDate()+day);
		cookieText+=";expires="+myDate;
	}
	if(path){
		cookieText+=";path="+path;
	}
	document.cookie=cookieText;
}

获取cookie

function getCookie(name){
	var i=document.cookie.indexOf(name);
	if(i!=-1){
		var start=i+name.length+1;
		var end=document.cookie.indexOf(";",i);
		if(end==-1){
			end=document.cookie.length;
		}
		
		return document.cookie.substring(start,end);
	}
}

删除cookie

function removeCookie(name){
	var i=document.cookie.indexOf(name);
	if(i!=-1){
		var start=i+name.length+1;
		var end=document.cookie.indexOf(";",i);
		if(end==-1){
			end=document.cookie.length;
		}
		let val=document.cookie.substring(start,end);
	}
	
	if(val!=undefined){
		document.cookie=name+"="+val+";expires="+new Date(0);
	}
}

cookie的特性

cookie自身局限性

1. 条数上的限制，最多20条
2. 大小上的限制，最多4k（4096字节）
3. cookie安全性较低，不能存放敏感数据
4. 带宽的浪费
5. Cookie 通过在客户端记录信息确定用户身份， Session 通过在服务器端记录信息确定用户身份。

cookie 与 session 的区别

6. cookie 数据存放在客户的浏览器上，session 数据放在服务器上

7. 考虑到安全应当使用 session

8. session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能,考虑到减轻服务器性能方面，应当使用COOKIE。

localStorage

localStorage保存在缓存里，只有手工删除或者清理浏览器缓存方可失效。在容量上也有一些限制，主要看浏览器的差异，Firefox3+、IE8+、Opera为5M，，Chrome和Safari为2.5M

创建操作

方法一 : 通过属性操作

localStorage.name; // 读操作

localStorage.name="rose"; //写操作

方法二 : 通过方法操作

localStorage.getItem("uname") // 读操作

localStorage.setItem("uname","jack"); // 写操作

删除操作

localStorage.removeItem()

清空所有

localStrorage.clear()

sessionStorage的方法与localStorage的方法一模一样

1. sessionStorage保存的数据只在用户浏览期间有效
2. localStorage保存的数据长期有效

应用缓存

特点

1. 离线浏览
2. 提升页面渲染速度
3. 减少服务器负载

步骤

1. 创建一个后缀名为.appcache的文件
2. CACHE MANIFEST…(需要加载的资源)
3. 在html标签中添加manifest=“appcache文件的地址”（挂载）