Web_cookie(缓存)的使用 及 cookie的增删改查封装

cookie的基本使用

什么是缓存？干嘛用的？

每次访问网页都得从服务器请求该网页的数据；如果短时间内，多次刷新 那么就要多次反复请求，
这样做的问题很明显：

1. 增大服务器压力；
2. 页面加载缓慢 很卡。

所以浏览器本身再带缓存功能。
把访问过的数据在本地存储一份，如果短时间内再次请求，那么不去向服务器要数据，而是把本地存储的缓存数据拿出来。这样增加了访问速度，和访问效率，以及用户体验更好。

所以缓存的目的：
是为了提高页面加载速度。

高级缓存分为：
一级缓存 二级缓存 三级缓存

那么前端有没有缓存的手段？
有！一共分为五种存储方式
页面是浏览器自动有缓存机制，但是我们内部的数据是没有缓存的。如果我们想要快速的访问数据，需要自己设置缓存。

五种方式都是哪五种？
打开谷歌浏览器F12控制，切换到application 找到storage。
localStorage sessionStorage cookie indexDB WebSQL;
local和session区别是，session是一次会话，local是永久存储。

学习cookie

cookie 的优点：
可以设置存储时间，可以跨浏览器标签获取，只要域名地址一样（session只能当前标签）；
cookie缺点：
没有很好的API支持，只有document.cookie;
不安全！ 在浏览器的本地文件中会有体现，能够被其他程序读取到。

cookie的使用：document.cookie

增加cookie：
document.cookie="键=值"；
（时长：默认一次会话 本次打开的浏览器不关闭 数据一直在）存储在本次打开的浏览器内存中。

增加带时长的cookie：
document.cookie="键=值；expires=GMT格式时间"；
需要Date对象调用toGMTString()方法返回时间格式；

删除cookie：
document.cookie=“原来的键=无所谓的值；expires=过去GMT”；
根据原有的键在设置一次 值无所谓 时间变成过去时间就可以；

修改cookie：
document.cokie如果有多个cookie那么获取格式是：键1=值1； 键2=值2； 键3=值3；
分割为;&nbsp；

没有存储cookie时 默认空字符串 即 获取时是空字符串

cookie的增删改查封装：

<button>增加cookie</button>
<button>删除cookie</button>
<button>获取cookie</button>
<button>修改cookie</button>

$(function () {
	$("button").eq(0).click(function () {
		// document.cookie="name=小强";
		//获取7天后的Date对象的时间
		console.log(new Date(new Date().getTime()+1000*60*60*24*7));
		var future=new Date(new Date().getTime()+1000*60*60*24*7);
		//用Date对象获取GMT格式的时间字符串
		// console.log(future.toGMTString());
		// console.log(new Date());
		document.cookie="name=小白; expires="+future.toGMTString();
		document.cookie="age=16";
		document.cookie="location=文化大厦";
	})
	$("button").eq(1).click(function () {
		var old=new Date(new Date().getTime()-2000);
		document.cookie="name=无所谓; expires="+old.toGMTString();
	})
	$("button").eq(2).click(function () {
		//  获取
		// console.log(document.cookie);
		var str=document.cookie;
		var arr= str.split("; ");
		// console.log(arr);
		for(var i=0;i<arr.length;i++){
			console.log(arr[i].split("="));
		}
	})
	$("button").eq(3).click(function () {
		//修改新值 如果不指明到期时间 则默认修改成一次会话
		// document.cookie="name=我是新值";
	})
})

cookie方法封装

//cookie-tools-1.1.js 文件名
var cookieUtils={
//封装：根据时长毫秒值获取GMT格式的方法
	getGMT:function(ms){
		if(!ms || typeof ms != "number"){
			return;
		}
		var nowMs=new Date().getTime();
		var futureDate=new Date(nowMs + ms);
		return futureDate.toGMTString();
	},
	//封装：获取所有cookie的方法
	getAllCookies:function(){
		var cookie=document.cookie;
		if(!cookie){
			//没有cookie直接return undefined
			return;
		}
		var json={};
		var arr=cookie.split("; ");
		arr.forEach(function(item,index){
			var arr1=item.split("=");
			//把键和值绑定给json
			json[ar1[0]]=arr1[1];
		})
		return json;
	},
	//增加cookie的方法 传入json一次可以增加多个
	/*参数列表
	1.json对象 存储多个cookie的对象
	2.expires到期时间 单位：毫秒值（正数表示未来毫秒值 负数表示过去毫秒值）
	返回值表示设置是否成功*/
	addItem:function(json,expires){
		if(!json){
			return false;
		}
		for(var k in json){
			//判断是否有第二个参数
			if(expires && typeof expires=="number"){
				//有时长就设置时长
				document.cookie=k+"="+json[k]+"; expires="+this.getGMT(expires);
			}else{
				//没有时长参数 直接设置cookie默认一次会话
				document.cookie=k+"="+json[k];
			}
		}
		return true;
	},
	/*删除cookie的方法
		参数列表：
		1.key传入一个要删除的键
		返回undefined表示删除失败，
		返回一个值表示删除成功 返回被删除的值*/
	removeItem:function(key){
		var cookie=document.cookie;
		if(!cookie){
			return;
		}
		var oldVal=this.getAllCookies()[key];
		if(oldVal==undefined){
			//表示这个键不存在 所以无法删除
			return;
		}
		//到这表示键存在 那么就随便设置一个值 主要是把时间改成过去时间
		document.cookie=key+"=任意一个值;" expires="+this.getGMT(-1000);
		//返回被删除的值
		return oldVal;
	},
	/*修改cookie的值
	参数列表：
	1.key要修改的那个键
	2.newVal 修改的新值
	3.expires修改后的到期时间*/
	setItem:function(key,newVal,expires){
		if(!key){
			return;
		}
		if(this.getAllCookies()[key]==undefined){
		//表示要修改的键不存在 则返回undefined
			return;
		}
		//到这一步表示键存在 那么直接修改
		if(expirse && typeof expires=="number"){
		//表示有新的 到期时长
			document.cookie=key+"="+newVal+"; expires="+this.getGMT(expires);
		}else{
			document.cookie=key+"="+newVal;
		}
	//返回新设置的值
		return newVal;
	},
	/*获取指定cookie
	键不存在则返回undefined*/
	getItem：function(){
	// console.log(this.getAllCookies);
        if(!key){
            return;
        }
        var cookieJson=this.getAllCookies();
        if(!cookieJson){
            //没有cookie直接返回undefined
            return;
        }
        return cookieJson[key];
	},
	/*清空所有cookie
		clear方法没有参数	*/
	clear:function(){
	//对已经存在的所有cookie再增加一次 修改时间为 过去时间 就是清楚所有
	this.addItem(this.fetAllCookies(),-1000);
	}
}

/* addItem({
键1:值1,
键2:值2
},距离1970的毫秒值)

removeItem("键")

modifyItem({
键: 新值

},毫秒值)
getItem("键")

getAllCookies() 返回一个json对象

clear() 清空所有cookie

*/