[29]Cookie与存储
来源:互联网 发布:淘宝联盟官网登录网址 编辑:程序博客网 时间:2024/06/10 07:58
随着 Web 越来越复杂,开发者急切的需要能够本地化存储的脚本功能。这个时候,第一个出现的方案:cookie 诞生了。cookie 的意图是:在本地的客户端的磁盘上以很小的文件形式保存数据。
一. Cookie
cookie 也叫 HTTP Cookie,最初是客户端与服务器端进行会话使用的。比如,会员登录 ,下次回访网站时无须登录了;或者是购物车,购买的商品没有及时付款,过两天发现购物车里还有之前的商品列表。
HTTP Cookie 要求服务器对任意 HTTP 请求发送 Set-Cookie,因此,Cookie 的处理原则上需要在服务器环境下进行。当然,现在大部分浏览器在客户端也能实现 Cookie 的生成和获取。(目前 Chrome 不可以在客户端操作,其他浏览器均可)
1.cookie 的组成
cookie 由名/值对形式的文本组成:name=value。完整格式为:
name=value; [expires=date]; [path=path]; [domain=somewhere.com]; [secure]
中括号是可选,name=value 是必选。
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;
PS:可以通过 Firefox 浏览器查看和验证失效时间。如果要提前删除 cookie 也非常简单 ,只要重新创建 cookie 把时间设置当前时间之前即可:date.getDate() - 1 或 new Date(0)。
path=path 访问路径,当设置了路径,那么只有设置的那个路径文件才可以访问 cookie。
var path = '/E:/%E5%A4%87%E8%AF%BE%E7%AC%94%E8%AE%B0/JS1/29/demo';document.cookie = "user= " +encodeURIComponent('李四') + ";path=" + path;
PS:为了操作方便,我直接把路径复制下来,并且增加了一个目录以强调效果。
domain=domain 访问域名,用于限制只有设置的域名才可以访问,那么没有设置,会默认限制为创建 cookie 的域名。
var domain = 'yc60.com';document.cookie = "user= " +encodeURIComponent('李四') + ";domain=" + domain;
PS:如果定义了 yc60.com,那么在这个域名下的任何网页都可访问,如果定义了v.yc60.com,那么只能在这个二级域名访问该 cookie,而主域名和其他子域名则不能访问。
PS:设置域名,必须在当前域名绑定的服务器上设置,如果在 yc60.com 服务器上随意设置其他域名,则会无法创建 cookie。
secure 安全设置,指明必须通过安全的通信通道来传输(HTTPS)才能获取 cookie。
document.cookie = "user= " +encodeURIComponent('李四') + ";secure";
PS:https 安全通信链接需要单独配置。
JavaScript 设置、读取和删除并不是特别的直观方便,我们可以封装成函数来方便调用。
//创建 cookiefunction 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;}
//获取 cookiefunction 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;}
//删除 cookiefunction unsetCookie(name) { document.cookie = name +"= ; expires=" + new Date(0);}
//失效天数,直接传一个天数即可function setCookieDate(day) { if(typeofday == 'number' && day > 0) { var date = new Date(); date.setDate(date.getDate() +day); } else { throw new Error('传递的 day 必须是一个天数,必须比 0 大'); } return date;}
二. cookie 局限性
cookie 虽然在持久保存客户端用户数据提供了方便,分担了服务器存储的负担。但是还有很多局限性的。
第一:每个特定的域名下最多生成 20 个 cookie(根据不同的浏览器有所区别)。
1.IE6 或更低版本最多 20 个 cookie
2.IE7 和之后的版本最多可以 50 个 cookie。IE7 最初也只能 20 个,之后因被升级不定后增加了。
3.Firefox 最多 50 个 cookie
4.Opera 最多 30 个 cookie
5.Safari 和 Chrome 没有做硬性限制。
PS:为了更好的兼容性,所以按照最低的要求来,也就是最多不得超过 20 个 cookie。当超过指定的cookie 时,浏览器会清理掉早期的 cookie。IE 和 Opera 会清理近期最少使用的 cookie,Firefox 会随机清理 cookie。
第二:cookie 的最大大约为 4096 字节(4k),为了更好的兼容性,一般不能超过 4095 字节即可。
第三: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 = setCookieDate(7); box.save('bookinfo'); //box.removeAttribute('name'); //删除 userDate //box.save('bookinfo'); box.load('bookinfo'); alert(decodeURIComponent(box.getAttribute('name')));});
PS:这个数据文件也是保存在 cookie 目录中,只要清除 cookie 即可。如果指定过期日期,则到期后自动删除,如果没有指定就是永久保存。
Web 存储
在比较高版本的浏览器,JavaScript 提供了sessionStorage和 globalStorage。在HTML5中提供了localStorage来取代globalStorage。而浏览器最低版本为:IE8+、Firefox3.5+、Chrome4+和Opera10.5+。
PS:由于这三个对浏览器版本要求较高,我们就只简单的在 Firefox 了解一下,有兴趣的可以通过关键字搜索查询。
//通过方法存储和获取sessionStorage.setItem('name', '李四');alert(sessionStorage.getItem('name'));//通过属性存储和获取sessionStorage.book = '李四';alert(sessionStorage.book);//删除存储sessionStorage.removeItem('name');
PS:由于 localStorage 代替了 globalStorage,所以在 Firefox、Opera 和 Chrome 目前的最新版本已不支持。
//通过方法存储和获取localStorage.setItem('name', '李四');alert(localStorage.getItem('name'));//通过属性存储和获取localStorage.book = '李四';alert(localStorage.book);//删除存储localStorage.removeItem('name');
PS:这三个对象都是永久保存的,保存在缓存里,只有手工删除或者清理浏览器缓存方可失效。在容量上也有一些限制,主要看浏览器的差异,Firefox3+、IE8+、Opera 为 5M,Chrome 和 Safari 为 2.5M。
- [29]Cookie与存储
- JavaScript-cookie与存储
- cookie与存储
- js存储cookie与读取cookie
- JS--中的 Cookie 与存储
- 本地存储-cookie与storage
- jquery.cookie 的用法 cookie读取与存储
- ASP.NET Cookie的存储与读取
- html5离线存储与cookie的区别
- ASP.NET Cookie的存储与读取
- JS基础——Cookie与存储
- 本地存储之Cookie与Storage
- ASP.NET Cookie的存储与读取
- cookie 存储
- cookie存储
- Cookie存储
- cookie存储
- cookie存储
- Java精选笔记_面向对象(多态、异常)
- C笔记小总结
- Java对象的线程状态
- Odoo 11 功能点
- appium环境搭建
- [29]Cookie与存储
- 二叉树三种遍历(java实现)
- Angular的Directive,以及copmile和link方法
- 跨域访问--CORS
- 常用的PopupWindow(1)
- JEPF项目初上手,一把辛酸泪
- 客户端安装步骤
- C语言编写的银行管理系统关键代码
- 98 Validate Binary Search Tree