<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js cookie应用</title>
</head>
<body>
<div>
<input type="button" value="提交" οnclick="setCookie(this.type,this.value,1)" />
<input type="button" value="删除cookie" οnclick="setCookie(this.type,this.value,0)" />
<input type="button" value="查看cookie" οnclick="getCookie()" />
</div>
<script>
function $id(o){
return document.getElementById(o) || o;
}
//js 创建cookie
//按照 name=value; max-age=seconds 方式设置cookie
//以名/值 的形式存储cookie
//同时采用encodeURIComponent()函数进行编程,来转义分号、逗号和空白符
//如果daysToLive是一个数字,设置max-age (单位默认为秒)属性为该数值表示cookie直到指定的天数
//到了才会过期,如果daysToLive 是0 就表示删除cookie
function setCookie(name, value, daysToLive){
var cookie = name + '=' + encodeURIComponent(value);
if(typeof daysToLive === 'number')
cookie += '; max-age=' + (daysToLive*60*60*24);
document.cookie = cookie;
console.log(document.cookie);
}
//将document.cookie 的值以名/值 对组成的一个对象返回
//假设存储cookie的值的时候是采用encodeURIComponent()函数编码的
function getCookie(){
var cookie = {}; //初始化最后要返回的对象
var all = document.cookie; //在一个大写字符串中获取所有的cookie值
if (all === '') return cookie; //如果该cookie属性值为空字符串,返回一个空对象
var list = all.split('; '); //分离出名/值对
for (var i = 0; i < list.length; i++) { //遍历每个cookie
var cookie = list[i];
var p = cookie.indexOf('='); //查找第一个"=" 符号
var name = cookie.substring(0,p); //获取cookie 的名字
var value = cookie.substring(p+1); //对其值进行解码
value = decodeURIComponent(value); //对其值进行解码
cookie[name] = value; //将名/值对存储到对象中
};
//console.log(cookie); // 直接输出是最后一个键值对
return cookie;
}
// 每个cookie保存数据不超过4kb,每个web服务器保存cookie数不超过20个,现代浏览器允许cookie总数过300个,但部分浏览器对单个cookie大小仍4kb
/**
* cookieStorage.js
* 本类实现了
* 注意:该例没有实现存储事件,当设置和查询cookieStorage对象的属性时,不会实现自动保存和获取对应的值
*/
function cookieStorage(maxage,path) { // 两个参数分别代表存储有效期和作用域
//获取一个存储全部cookie信息的对象
var cookie = (function() {
var cookie = {}; //该对象最终会返回
var all = document.cookie; //以大字符串的形式获取所有cookie信息
if(all === '') //如果该属性为空字符串
return cookie; //返回一个空对象
var list = all.split('; '); //分离出名/值对
for (var i = 0; i < list.length; i++) { //遍历每个cookie
var cookie = list[i];
var p = cookie.indexOf('='); //查找第一个'=' 符号
var name = cookie.substring(0,p); //获取cookie 的名字
var value = cookie.substring(p+1); //对其值进行解码
value = decodeURIComponent(value); //对其值进行解码
cookie[name] = value; //将名/值对存储到对象中
};
return cookie;
}());
// 将所有cookie的名字存储到一个数组中
var keys = [];
for (var key in cookie) keys.push(key);
//现在定义存储API 公共的属性和方法
//存储的cookie的个数
this.length = keys.length;
//返回第n个cookie的名字,如果n越界则返回null
this.key = function(n){
if(n<0 || n> keys.length) return null;
return keys[n];
};
//返回指定名字的cookie值,如果不存在返回null
this.getItem = function(name){
return cookie[name] || null;
}
//存储cookie值
this.setItem = function(key,value){
if(!(key in cookie)){ //如果要存储的cookie还不存在
keys.push(key); //将指定的名字加入到存储所有cookie名的数组中
this.length++; //cookie个数加1
}
//将该名/值对数据存储到cookie对象中
cookie[key] = value;
//开始正式设置cookie
//首先将要存储的cookie的值进行编码,同时创建一个"名字=编码后的值"形式的字符串
var cookie = key + '=' + encodeURIComponent(value);
//将cookie的属性也加入到该字符串中
if(maxage) cookie += '; max-age=' + maxage;
if(path) cookie += '; path=' + path;
//通过document.cookie属性来设置cookie
document.cookie = cookie;
};
this.removeItem = function(key) {
if (!(key in cookie)) return; //如果cookie不存在,则什么也不做
//从内部维护的cookie组删除指定的cookie
delete cookie[key];
// 同时将cookie中的名字也在内部的数组中删除
// 如果使用ES5定义的数组 indexOf()方法会更加简单
for (var i = 0; i < keys.length; i++) { //遍历所有的名字
if(keys[i] === key){ //当我们找到了要找的那个
keys.splice(i,1); //将它从数组中删除
break;
}
}
this.length--; //cookie个数减一
//最终通过该cookie的值设置为空的字符串以及将有效期设置为0 来删除指定的cookie
document.cookie = key + '=; max-age=0';
};
//删除所有的cookie
this.clear = function() {
//循环所有的cookie名字,并将cookie删除
for (var i = 0; i < keys.length; i++)
document.cookie = keys[i] + '=; max-age=0';
//重置所有的内部状态
cookie = {};
keys = [];
this.length = 0;
};
}
</script>
</body>
来自javascript 权威指南第六版