首页 > js学习 > js基础知识 > javascript中cookie与WEB存储
2016
12-16

javascript中cookie与WEB存储

HTTP Cookie要求服务器对任意HTTP请求发送Set-Cookie,因此,Cookie的处理原则上需要在服务器环境下进行。当然,现在大部分浏览器在客户端也能实现Cookie的生成和获取。(目前Chrome不可以在客户端操作,其他浏览器均可)

cookie由名/值对形式的文本组成,完整格式为:name=value; [expires=date]; [path=path]; [domain=somewhere.com]; [secure]

document.cookie = 'user=' + encodeURIComponent('中文用户名'); //编码写入

alert(decodeURIComponent(document.cookie)); //解码读取

expires=date 失效时间,如果没有声明,则为浏览器关闭后即失效。声明了失效时间,那么时间到期后方能失效。

var date = new Date(); date.setDate(date.getDate() + 7); //设置相对当前天数的过期天数

document.cookie = "user= " + encodeURIComponent('用户名') +";expires=" + date;

想要删除cookie只要重新创建cookie把时间设置当前时间之前即可:date.getDate() - 1或new Date(0)。

path=path 访问路径,当设置了路径,那么只有设置的那个路径文件才可以访问cookie。

domain=domain 访问域名,用于限制只有设置的域名才可以访问,那么没有设置,会默认限制为创建cookie的域名。

设置域名,必须在当前域名绑定的服务器上设置,如果在服务器上随意设置其他域名,则会无法创建cookie。

secure 安全设置,指明必须通过安全的通信通道来传输(HTTPS)才能获取cookie。

document.cookie = "user= " + encodeURIComponent('用户名') + ";secure";

JavaScript设置、读取和删除并不是特别的直观方便,我们可以封装成函数来方便调用。

创建cookie:

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

var cookieText = encodeURIComponent(name) + '=' + encodeURIComponent(value);

if (expires instanceof Date){cookieText += '; expires=' + expires;}

if (path) {cookieText += '; expires=' + expires;}

if (domain) {cookieText += '; domain=' + domain;}

if (secure) {cookieText += '; secure';}

document.cookie = cookieText;

}

获取cookie:

function getCookie(name) {

var cookieName = encodeURIComponent(name) + '=';

var cookieStart = document.cookie.indexOf(cookieName);

var cookieValue = null;

if (cookieStart > -1) {

var cookieEnd = document.cookie.indexOf(';', cookieStart);

if (cookieEnd == -1) {cookieEnd = document.cookie.length;}

cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));

}

return cookieValue;

}

删除cookie:

function unsetCookie(name) {document.cookie = name + "= ; expires=" + new Date(0);}

cookie局限性:cookie虽然在持久保存客户端用户数据提供了方便,分担了服务器存储的负担。但是还有很多局限性的。

1:每个特定的域名下最多生成20个cookie(根据不同的浏览器有所区别,但为了兼容最好不要超过20个)。

1.IE6或更低版本最多20个cookie、2.IE7和之后的版本最多可以50个cookie。、3.Firefox最多50个cookie、4.Opera最多30个cookie、5.Safari和Chrome没有做硬性限制。

当超过指定的cookie时,浏览器会清理掉早期的cookie。IE和Opera会清理近期最少使用的cookie,Firefox会随机清理cookie。

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

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

其他存储:IE提供了一种存储可以持久化用户数据,叫做userData,从IE5.0就开始支持。每个数据最多128K,每个域名下最多1M。这个持久化数据存放在缓存中,如果缓存没有清理,那么会一直存在。

<div style="behavior:url(#default#userData)" id="box"></div>

addEvent(window, 'load', function () {

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

box.setAttribute('name', encodeURIComponent('中文转码字符串')); //要保存的名/值对

box.expires=表示过期的时间字符串(这里需要用toUTCString()方法把时间数据转换成字符串)

box.save('bookinfo');//设置名称,通过该名称可以获取对应的名/值对

//box.removeAttribute('name'); //删除userDate

//box.save('bookinfo');

box.load('bookinfo'); //通过该名称获取对应的名/值对

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

});

这个数据文件也是保存在cookie目录中,只要清除cookie即可。如果指定过期日期,则到期后自动删除,如果没有指定就是永久保存。

Web存储:在比较高版本的浏览器,JavaScript提供了sessionStorage和globalStorage。在HTML5中提供了localStorage来取代globalStorage。而浏览器最低版本为:IE8+、Firefox3.5+、Chrome 4+和Opera10.5+。

localStorage方法存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。

(1)localStorage.setItem(key,value) 或者 localStorage.key=value:添加本地存储数据。

(2)localStorage.getItem(key) 或者 localStorage.key:通过key获取相应的Value。

(3)localStorage.removeItem(key):通过key删除本地数据。

(4)localStorage.clear():清空所有数据。

localStorage.length返回当前本地数据存储的个数。

sessionStorage跟浏览器当前会话相关,当会话结束后,数据会自动清除,跟未设置过期时间的Cookie类似。sessionStorage的使用方法和localStorage相似

(1)sessionStorage.setItem(key,value) 或者 sessionStorage.key=value:添加存储数据。

(2)sessionStorage.getItem(key) 或者 sessionStorage.key:通过key获取相应的Value。

(3)sessionStorage.removeItem(key):通过key删除数据。

(4)sessionStorage.clear():清空所有数据。

在容量上也有一些限制,主要看浏览器的差异,Firefox3+、IE8+、Opera为5M,,Chrome和Safari为2.5M。

最后编辑:
作者:qingheluo
这个作者貌似有点懒,什么都没有留下。