JS--中的 Cookie 与存储

时间：2023-03-09 16:23:49
JS--中的 Cookie 与存储

Cookie 主要是在客户端进行一些简单的数据存储等，使用来提供本地化存储的脚本功能。Cookie 的处理环境本身是需要在服务器下进行的，但是现在的大部分浏览器都已经支持Cookie本地化的存储于处理。

一  Cookie 的组成

Cookie 是由名/值对组成：name=value;  完整的形式为：

name=value;[expires=过期时间];[path=路径限制];[domain=域名限制];[secure].其中前面的name=value是必选，后面中括号中的内容是可选，每一个选项之间用分号隔开。

name=value：就是存储在Cookie文件中的cookie名称和对应的值，name和value都是开发人员自己取的名字，后存储的会将先存储的进行覆盖掉，最好是用encodeURIComponent()方法对其进行编码。

expires=过期时间：这个是可可选项，是用来设置当前cookie的过期时间的，当过了这个时间后，浏览器会自动的清理此cookie，如果不设置默认的在浏览器关闭的时候将此cookie选项给清理掉。

domain=域名限制：设置了此项目，用于限制只有设置的域名才可以访问，那么没有设置，会默认限制为创建cookie 的域名，如果待访问的域名和设置的域名不一样是不能够访问的。如果设置域名访问，必须在当前域名绑定的服务器上面设置，如果在当前域名绑定的服务器上面任意设置其它域名是不能够设置成功的，这样创建也不能够成功。并且，如果设置为www.baidu.com那么在这个域名下的所有页面都可以访问当前cookie，而如果设置为baike.baidu.com
则只能是这个二级域名中的网页来访问这个cookie文件，主域名和其它同级的二级域名是不能够访问则个cookie的。

path=限制路径：访问路径， 当设置了路径， 那么只有设置的那个路径文件才可以访问 cookie

secure：安全设置，指明必须通过安全的通信通道来传输(HTTPS)才能获取 cookie。。通过普通的HTTP来使无法获取指明了由secure保存的cookie的，即使本地也不行

代码：

<span style="font-size:18px;">document.cookie = "user3="+encodeURIComponent('你是谁');

var date=new Date();

date.setDate(date.getDate()+3);

var path="/G:/"

document.cookie="ppp=abced;expires="+date+'path='+path;

document.cookie="user=wanzheng;domain=yc60.com;path=/;expires='+date+';secure";</span>

二  封装方法

1、设置Cookie文件

从上面可以看出如果每一个cookie都这样写的话，有点麻烦，可以通过封装成一个方法来进行cookie的获取和设置。JS由于是弱类型的语言，对调用的函数的参数个数的匹配要求也并不严格，在下面的cookie设置函数中，如果有的参数没有传递过来，也是不会报错的。如果中间有的参数不传递，但要传递两边的参数，那么中间的参数用null代替即可

<span style="font-size:18px;">//cookie 名称，值，过期时间，限制路径，限制域名，限制安全连接

function setCookie(name,value,expires,path,domain,secure){

	var strCookie = encodeURIComponent(name) + '=' + encodeURIComponent(value);<span style="white-space:pre">	</span>//对分号也会进行一个编码

	if(expires instanceof Date){

		strCookie += ';expires = ' + expires;

	}

	if(path){

		strCookie += ';path=' + path;

	}

	if(domain){

		strCookie += ';domain=' + domain;

	}

	if(secure){

		strCookie += ';secure';

	}

	document.cookie = strCookie;

}</span>

2、获取Cookie文件

通过documen.cookie 就可获取当前页面设置的所有的cookie文件，但是，返回的是一个字符串，是cookie文件夹下所有的名值对用分号和空格组成的字符串，格式如下：

<span style="font-size:18px;">document.cookie='user=abcd';

document.cookie='email=ema;il@qq.com';	//分号如果不进行编码的话，后面的是存不进去的

document.cookie='email2=email@qq.com';

document.cookie='numb=1235';

alert(document.cookie);	//user=abcd; email=ema; email2=email@qq.com; numb=1235</span>

但是通常情况下，我们都是希望通过Cookie名称来获得值，所有封装一个方法：

<span style="font-size:18px;">//根据传递过来的cookie名称，获得值

function getCookie(name){

	var cookName = encodeURIComponent(name) + "=";

	//先用正则表达式来精确匹配，是否存在，如果不存在就直接返回

	var flage=document.cookie.match(new RegExp('(\\s|^)' + cookName));//每个名值对之前都有一个空格，但是开始的第一个没有

	if(! flage){

		return;

	}

	//获得传递过来的缓存名在缓存字符串中的索引，如果不存在就返回的是-1

	var startIndex = document.cookie.indexOf(cookName);

	var cookValue = null;

	if(startIndex > -1){

		var endIndex = document.cookie.indexOf(';',startIndex);	//从起始位置开始检索分号的位置

		if(endIndex == -1){	//是最后一个cookie

			endIndex = document.cookie.length;

		}

		cookValue = decodeURIComponent(document.cookie.substring(startIndex+cookName.length,endIndex));

	}

	return cookValue;

}</span>

3、对设置Cookie时的时间的处理

在设置cookie的时候，一般是通过传递一个天数，然后就可以设置它的过期时间等，故封装成一个方法：

<span style="font-size:18px;">//用户传递一个保存的天数，返回过期的日期

function getDate(day){

	var date = null;

	if(typeof day == 'number' && day > 0){

		date = new Date();

		date.setDate(date.getDate() + day);

	}else{		//抛出一个异常，或者也可以设置为当前的天数

		throw new Error('您传递的天数不合法，必须是大于0的整数')

	}

	return date;

}</span>

4、调用方法设置和获取Cookie文件

<span style="font-size:18px;">setCookie('user','abcd',getDate(3));

setCookie('email','qim;st@qq.com',getDate(4));	//传递分号过去，会自动进行编码

alert(document.cookie);	<span style="white-space:pre">		</span>//输出的时候是将所有的缓存用分号和空格隔开连接

alert(document.cookie);

alert(getCookie('user'));

alert(getCookie('email'));

//通过用正则表达式进行精确的匹配后，这个问题就能够解决

alert(getCookie('ail'));	//这个同样有返回值，和上面这个是一样的

alert(getCookie('ai'));	</span>

三  Cookie 的一些局限性

第一：每个特定的域名下最多生成 20 个 cookie（根据不同的浏览器有所区别） 。
1.IE6 或更低版本最多 20 个 cookie
2.IE7 和之后的版本最多可以 50 个 cookie。 IE7 最初也只能 20 个， 之后因被升级不定后增加了。
3.Firefox 最多 50 个 cookie
4.Opera 最多 30 个 cookie
5.Safari 和 Chrome 没有做硬性限制。

为了更好的兼容性，所以按照最低的要求来，也就是最多不得超过 20 个 cookie。当超过指定的 cookie 时，浏览器会清理掉早期的 cookie。IE 和 Opera 会清理近期最少使用的 cookie，Firefox 会随机清理 cookie。

第二、cookie 的最大大约为 4096 字节(4k)，为了更好的兼容性，一般不能超过 4095 字节即可。

第三：cookie 存储在客户端的文本文件，所以特别重要和敏感的数据是不建议保存在cookie 的。比如银行卡号，用户密码等。

四  一些其它的存储方法

1、IE提供的利用Css属性来存储

IE 提供了一种存储可以持久化用户数据，叫做 userData，从 IE5.0 就开始支持。每个数据最多 128K，每个域名下最多 1M。这个持久化数据存放在缓存中，如果缓存没有清理，那么会一直存在。这个数据文件也是保存在 cookie 目录中，只要清除 cookie 即可。如果指定过期日期，则到期后自动删除，如果没有指定就是永久保存。

但是此种方法在IE11中已经不再支持

<span style="font-size:18px;"><div style="behavior:url(#default#userData)" id="box"></div>

window.onload=function(){

	var box = document.getElementById("box");

	box.setAttribute("name",'abced');

	box.expires = setCookieDate(7);	//直接点属性设置

	box.save('user');

	box.load('user');

	alert(box.getAttribute('name'));

	box.removeAttribute('name');	//删除缓存中的文件

	box.save('user')

})</span>

2、Web存储

在比较高的浏览器中，JavaScript 提供了 sessionStorage 以及localStorage。 localStorage是HTML5中替代老版本的globalSession的。

//Web存储，这个其实不是写在cookie文件中的，是写在缓存中的

//sessionStorage.setItem('user','abcde');	//通过方法来设置和读取

alert(sessionStorage.getItem('user'));	//读取文件

sessionStorage.removeItem('user');		//移除文件

alert(sessionStorage.getItem('user'));	//null

//通过属性的方式来设置和获取

sessionStorage.book = 'woshiyiebshu';

alert(sessionStorage.book);
localStorage.book='nishiehnm';

alert(localStorage.book);

localStorage.setItem("she",'hehehe');

alert(localStorage.getItem('she'));

alert(localStorage.getItem('book'));

localStroage.removeItem('book');

alert(localStorage.book);

这三个对象[sessionStorage,globalStroage,localStorage]都是永久保存的，保存在缓存里，只有手工删除或者清理浏览器缓存方可失效。 在容量上也有一些限制， 主要看浏览器的差异， Firefox3+、 IE8+、 Opera 为 5M，Chrome 和 Safari 为 2.5M。

相关文章