`
chaoyi
  • 浏览: 287475 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

第二十九章:Cookie 与存储

 
阅读更多

学习要点:
1.cookie
2.cookie 局限性
3.其他存储

随着 Web 越来越复杂,开发者急切的需要能够本地化存储的脚本功能。这个时候,第一个出现的方案:cookie 诞生了。cookie 的意图是:在本地的客户端的磁盘上以很小的文件形式保存数据。
一.Cookie
cookie 也叫 HTTP Cookie, 最初是客户端与服务器端进行会话使用的。 比如, 会员登录,下次回访网站时无须登录了; 或者是购物车, 购买的商品没有及时付款, 过两天发现购物车
里还有之前的商品列表。
HTTP Cookie 要求服务器对任意 HTTP 请求发送 Set-Cookie,因此,Cookie 的处理原则上需要在服务器环境下进行。当然,现在大部分浏览器在客户端也能实现 Cookie 的生成和获取。(目前 Chrome 不可以在客户端操作,其他浏览器均可)
cookie 的组成
cookie 由名/值对形式的文本组成:name=value。完整格式为:

name=value; [expires=date]; [path=path]; [domain=somewhere.com]; [secure]

 
中括号是可选,name=value 是必选。

document.cookie = 'user=' + encodeURIComponent('chaoyi'); //编码写入
alert(decodeURIComponent(document.cookie)); //解码读取

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

var date = new Date(); //创建一个
date.setDate(date.getDate() + 7);
document.cookie = "user= " + encodeURIComponent('chaoyi') +";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('chaoyi') + ";path=" + path;

 
PS:为了操作方便,我直接把路径复制下来,并且增加了一个目录以强调效果。
domain=domain 访问域名,用于限制只有设置的域名才可以访问,那么没有设置,会默认限制为创建 cookie 的域名。

var domain = 'yc60.com';
document.cookie = "user= " + encodeURIComponent('chaoyi') + ";domain=" + domain;

 
PS:如果定义了 yc60.com,那么在这个域名下的任何网页都可访问,如果定义了v.yc60.com,那么只能在这个二级域名访问该 cookie,而主域名和其他子域名则不能访问。
PS:设置域名,必须在当前域名绑定的服务器上设置,如果在 yc60.com 服务器上随意设置其他域名,则会无法创建 cookie。
secure 安全设置,指明必须通过安全的通信通道来传输(HTTPS)才能获取 cookie。

document.cookie = "user= " + encodeURIComponent('chaoyi') + ";secure";

 
PS:https 安全通信链接需要单独配置。
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);
}

 
//失效天数,直接传一个天数即可

function setCookieDate(day) {
if (typeof day == '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('chaoyi'));
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', 'chaoyi');
alert(sessionStorage.getItem('name'));

 
//通过属性存储和获取

sessionStorage.book = 'chaoyi';
alert(sessionStorage.book);

 
//删除存储

sessionStorage.removeItem('name');

 
PS: 由于 localStorage 代替了 globalStorage, 所以在 Firefox、 Opera 和 Chrome 目前的最新版本已不支持。
//通过方法存储和获取

localStorage.setItem('name', 'chaoyi');
alert(localStorage.getItem('name'));

 
//通过属性存储和获取

localStorage.book = 'chaoyi';
alert(localStorage.book);

 
//删除存储

localStorage.removeItem('name');

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

分享到:
评论

相关推荐

    Java语言基础下载

    第二十九章: Jsp 技术 583 学习目标 583 JSP介绍 584 JSP语法 584 模板元素 588 指令元素 588 页面指令 588 标签库指令 593 脚本元素 593 动作元素 597 &lt;jsp:include&gt; 598 JSP内置对象 605 Session和Application...

    Pyramid Web框架在商城项目中的应用

    第二讲:Python语言基础(运算符与表达式,控制流,函数,模块) 第三讲:Python语言基础(基本数据结构) 第四讲:Python语言基础(面向对象,Pyramid框架入门) 第五讲:Pyramid框架入门 第六讲:存储模型设 ...

    ASP.NET教学讲义,完整章节

    第二章:WEB服务器控件 26 2.1 WEB 服务器控件的格式 26 2.2 服务器控件的类型 27 2.3 用服务器控件建立页面 27 2.4 控件的常见属性 29 2.5 控件的种类 31 第三章:HTML控件和验证控件 42 3.1 HTML服务器控件简介 42...

    asp.net教学讲义

    第二章:WEB服务器控件 23 2.1 WEB 服务器控件的格式 23 2.2 服务器控件的类型 23 2.3 用服务器控件建立页面 23 2.3.1 在设计界面上使用服务器控件高级编程) 24 2.3.2 在Source界面使用服务器控件 24 2.3.3 处理...

    turbo-front-challenges:该存储库用于组织我与“ Turbo Front”课程相关的代码

    涡轮前线挑战该存储库用于组织我与“ Turbo Front”课程相关的代码第一个项目:询问Cookie权限的简单警报。 第二个项目:根据复选框的状态打开和关闭的输入框,两张卡第三项目:一种简单的响应式页脚Forth Project:...

    ASPNET35开发大全第一章

    第二篇 ASP.NET窗体控件 第5章 Web窗体的基本控件 5.1 控件的属性 5.2 简单控件 5.2.1 标签控件(Label) 5.2.2 超链接控件(HyperLink) 5.2.3 图像控件(Image) 5.3 文本框控件(TextBox) 5.3.1 文本框控件的...

    计算机网络1.0.docx

    某单位局域网通过ISP提供的宽带线路与Internet相连,ISP分配的公网IP地址为202.117.12.32/29,局域网中一部分计算机通过代理服务器访问Internet,而另一部分计算机不经过代理服务器直接访问Internet。其网络连接方式...

    PHP和MySQL WEB开发(第4版)

    第二篇 使用MySQL 第8章 设计Web数据库 8.1 关系数据库的概念 8.1.1 表格 8.1.2 列 8.1.3 行 8.1.4 值 8.1.5 键 8.1.6 模式 8.1.7 关系 8.2 如何设计Web数据库 8.2.1 考虑要建模的实际对象 8.2.2 避免保存冗余数据 ...

    PHP和MySQL Web开发第4版pdf以及源码

    第二篇 使用MySQL 第8章 设计Web数据库 8.1 关系数据库的概念 8.1.1 表格 8.1.2 列 8.1.3 行 8.1.4 值 8.1.5 键 8.1.6 模式 8.1.7 关系 8.2 如何设计Web数据库 8.2.1 考虑要建模的实际对象 8.2.2 避免...

    PHP和MySQL Web开发第4版

    第二篇 使用MySQL 第8章 设计Web数据库 8.1 关系数据库的概念 8.1.1 表格 8.1.2 列 8.1.3 行 8.1.4 值 8.1.5 键 8.1.6 模式 8.1.7 关系 8.2 如何设计Web数据库 8.2.1 考虑要建模的实际对象 8.2.2 避免...

    go web编程

    第二部分 Web应用的基本组成部分 第3章 接收请求 49 3.1 Go的net/http标准库 49 3.2 使用Go构建服务器 51 3.2.1 Go Web服务器 51 3.2.2 通过HTTPS提供服务 53 3.3 处理器和处理器函数 56 ...

    php网络开发完全手册

    13.6.2 第二范式(2NF) 209 13.6.3 第三范式(3NF) 210 13.7 数据库设计的方法与步骤 210 13.7.1 需求分析 211 13.7.2 概念设计的E-R方法 214 13.7.3 数据库的逻辑设计方法 215 13.7.4 物理设计阶段 218 13.7.5 ...

    ASP.NET4高级程序设计第4版 带目录PDF 分卷压缩包 part1

    第二部分 数据访问 第7章 基础 7.1 ADO.NET架构 7.1.1 ADO.NET数据提供程序 7.1.2 ADO.NET的标准化 7.1.3 基本ADO.NET类 7.2 Connection类 7.2.1 连接字符串 7.2.2 测试连接 7.2.3 连接池 7.3 ...

    ASP.NET4高级程序设计(第4版) 3/3

    第二部分 数据访问 第7章 基础 208 7.1 ADO.NET架构 209 7.1.1 ADO.NET数据提供程序 209 7.1.2 ADO.NET的标准化 210 7.1.3 基本ADO.NET类 211 7.2 Connection类 212 7.2.1 连接字符串 212 7.2.2 ...

    D5开发人员指南-07卷

    第31章 用WebBroker使应用程序具有 Internet功能 1084 31.1 ISAPI、NSAPI和CGI—Web服务 器扩展 1085 31.1.1 公共网关接口 1085 31.1.2 ISAPI和NSAPI 1085 31.2 用Delphi创建Web应用程序 1086 31.2.1 TWebModule和...

    Web安全深度剖析(张柄帅)

    第11章 实战入侵与防范 236 11.1 开源程序安全剖析 236 11.1.1 0day攻击 236 11.1.2 网站后台安全 238 11.1.3 MD5还安全吗 243 11.2 拖库 248 11.2.1 支持外连接 248 11.2.2 不支持外连接 253 11.3 小结 262 第4篇 ...

    Delphi5开发人员指南

    第二部分 高级技术 第8章 使用GDI和字体的图像编程 167 8.1 TImage:Delphi的图像显示 167 8.2 存储图像 168 8.3 使用TCanvas的属性 169 8.3.1 画笔 170 8.3.2 使用TCanvas.Pixels属性 175 8.3.3 使用刷子 175 8.3.4...

Global site tag (gtag.js) - Google Analytics