1.读写cookie
console.log(typeof document.cookie); // 读cookie document.cookie = 'user = HQQ'; // 写cookie console.log(document.cookie); // 打印出 user = HQQ ps: IE有编码问题 // 解决编码问题 document.cookie = 'user' + encodeURIComponent('张三'); console.log(document.cookie);
2.设置cookie
// 设置 function setCookie(name,value,expires,path,domain,secure){ var cookieName = encodeURIComponent(name) + '=' + encodeURIComponent(value); if(expires instanceof Date){ cookieName += ';expires=' + expires; } if(path){ cookieName += ';path=' + path; } if(domain){ cookieName += ';domain=' + domain; } if(secure){ cookieName += ';secure'; } document.cookie = cookieName; } // 获取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-1; } cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length,cookieEnd)); // 转码 return cookieValue; } } alert(getCookie('USER2')) // 过期时间 function setCookieDate(day){ // 传递天数 if (typeof day == 'number' && day > 0){ date = new Date(); date.setDate(date.getDate() + day); }else{ throw new Error('天数必须大于零') } return date; } // setCookie('USER','张三',setCookieDate(7)) // setCookie('URL','www.baidu.com') // setCookie('email','534047909@qq.com');
3.cookie局限性
第一:每个特定的域名下最多生成20个cookie(根据不同的浏览器有所区别)
1.IE6或更低版本最多20个cookie
2。IE7和之后的版本以及火狐最多可以50个cookie
3. Opera最多30个cookie
4.safari和chorme 没有做硬性限制
ps: 为了更好的兼容性,所以按照最低的要求来,也就是最多不超过20个cookie.当超过指定的cookie时,浏览器会清理掉早期的cookie,IE和Opera会清理最少使用的cookie,Firefox会随机清理cookie
第二:cookie的最大大约为4096字节(4k),为了更好地兼容性,一般不超过4095字节
第三:cookie存储在客户端的文本文件,特别重要和敏感的数据不建议保存在cookie
4.web存储
在比较高的版本的浏览器中,js提供了sessionStorage和gloabalStorage.在HTML5中提供了localStorage来取代gloabalStorage。且容量有限
// 通过方法存储和获取 sessionStorage.setItem('name','hqq'); alert(sessionStorage.getItem('name')); // 通过属性存储和获取 sessionStorage.book = '语文'; alert(sessionStorage.book); // 删除存储 sessionStorage.removeItem('name');
// sessionStorage和localStorage用法一样