JavaScript高级程序设计 客户端存储学习笔记


Posted in Javascript onSeptember 10, 2011

第十九章 客户端存储
1.cookie
①最初是在客户端用于存储会话信息的。
1.1 限制
①cookie在性质上是绑定在特定的域名下的。当设定了一个cookie后,再给创建它的域名发送请求时,都会包含这个cookie。
②cookie的限制:
□IE6以及更低版本限制每个域名最多20个cookie。
□IE7和之后版本每个域名最多50个cookie。
□Firefox50个
□Opera50个
□Safari和Chrome无硬性规定
③cookie尺寸限制:4096字节(加减1)的长度限制。尺寸限制到一个域下所有的cookie,而非每个cookie单独限制。
1.2 cookie的成分
名称、值、域、路径、失效时间、安全标志。
1.3 JavaScript中的cookie
JavaScript操作cookie是通过BOM的document.cookie属性。
①当用来获取属性时,document.cookie返回当前页面可用的所有cookie的字符串,一系列由分号隔开的名-值对。
name1=value;name2=value2;name3=value3
所有名字和值都经URL编码,所以必须使用decodeURIComponent()来解码。
②用于设置值时,document.cookie属性可以设为一个新cookie字符串。设置document.cookie并不会覆盖cookie,除非设置的cookie名已经存在。设置前必须用encodeURIComponent()编码。
③没有删除cookie的直接方法。需要使用相同的路径、域和安全选项再次设置cookie,并将失效时间设为过去的时间。
□cookie读取、写入和山粗功能:
var CookieUtil = {
get : function(name){
var cookieName = encodeURIComponent(name) + "=",
cookieStart = document.cookie.indexOf(cookieName),
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;
},
set : function(name, value, expires, path, domain, secure){
var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value);
if(expires instanceof Date){
cookieText += ";expires=" + expires.toGMTString();
}
if(path){
cookieText += "; path=" + path;
}
if(domain){
cookieText += "; domain=" + domian;
}
if(secure){
cookieText += "; secure";
}
document.cookie = cookieText;
},
unset : function(name, path, domain, secure){
this.set(name, "", new Date(0), path, domain, secure);
}
};
1.4 子cookie
①子cookie是存放单个cookie中更小段的数据。也就是使用cookie值来存储多个名称-值对。
name=name1=value1&name2=value2&name3=value3
□操作子cookie,get、getAll、set、setAll、unset、unsetAll:
var subCookieUtil = {
get : function(name, subName){
var subCookies = this.getAll(name);
if(subCookies){
return subCookies[subName];
}else{
return null;
}
},
getAll : function(name){
var cookieName = encodeURIComponent(name) + "=",
cookieStart = document.cookie.indexOf(cookieName),
cookieValue = null,
result = {};
if(cookieStart > -1){
var cookieEnd = document.cookie.indexOf(";",cookieStart);
if(cookieEnd == -1){
cookieEnd = document.cookie.length;
}
cookieValue = document.cookie.substring(cookieStart + cookieName.length,cookieEnd);
if(cookieValue.length > 0){
var subCookies = cookieValue.split("&");
for(var i=0, len=subCookies.length; i<len; i++){
var parts = subCookies[i].split("=");
result[decodeURIComponent(parts[0])] = decodeURIComponent(parts[1]);
}
return result;
}
}
return null;
},
Set : function(name, subName, value, expires, path, domain, secure){
Var subCookies = this.getAll(name) || {};
Subcookies[subName] = value;
This.setAll(name, subcookies, expires, path, domain, secure);
},
setAll : function(name, subcookies, expires, path, domain, secure){
var cookieText = encodeURIComponent(name) + "=";
var subcookieParts = new Array();
for(var subName in subcookies){
if(subName.length>0 && subcookies.hasOwnProperty(subName)){
subcookieParts.push(encodeURIComponent(subName) + "=" + encodeURIComponent(subcookies[subName]));
}
}
if(cookieParts.length>0){
cookieText += subcookieParts.join("&");
if(expires instanceof Date){
cookieText += ";expires=" + expires.toGMTString();
}
if(path){
cookieText += ";path=" + path;
}
if(domain){
cookieText += ";path" + path;
}
if(secure){
cookieText += ";secure";
}
}else{
cookieText += ";expires=" + (new Date(0)).toGMTString();
}
document.cookie = cookieText;
},
unset : function(name, subName, path, domain, secure){
var subcookies = this.getAll(name);
if(subcookies){
delete subcookies[subName];
this.setAll(name, subcookies, null, path, domain, secure);
}
},
unsetAll : function(name, path, domain, secure){
this.setAll(name, null, new Date(0), path, domain, secure);
}
}
2.IE用户数据(不太实用,略之)
3.DOM存储机制
①DOM存储两个目标
□提供一种在cookie之外存储会话数据的途径。
□提供一种存储大量可以跨越会话存在的数据的机制。
②支持情况:
□Firefox2支持部分
□IE8+、Safari3.1+、Chrome1.0+、Firefox3.1+全部实现。
3.1 存储类型
①Storage类型用来存储最大限(因浏览器而异)的名值对。Storage的实例和其他对象行为一样,有下列额外的方法。
□clear():删除所有值。
□getItem(name):根据指定的名字name获取相应的值。
□key(index):在指定的数字位置获取该位置的名字。
□removeItem(name):删除由名字name指定的名值对。
□setItem(name, value):为指定的名字name设置一个对应的值。
□可通过属性访问值。
3.2 sessionStorage对象
①sessionStorage对象存储特定于某个会话的数据,也即数据只保存到浏览器关闭。存储在sessionStorage中的数据可以跨越页面刷新而存在。
②sessionStorage对象绑定于某个服务器会话,所以文件在本地运行时不可用。存储在sessionStorage中数据只能由最初给对象存储数据的页面访问到,对多页面应用有限制。
③sessionStorage对象是Storage类型的实例。
3.3 globalStorage对象
①只在Firefox2中实现。跨越会话存储数据,并且有特定的访问限制。
//保存数据
globalStorage["wrox.com"].name = "Nicholas";
//获取数据
var name = globalStorage["wrox.com"].name;
3.4 localStorage对象
①localStorage上不能指定任何访问性规则;规则事先设定好了。为了能访问到同一个localStorage对象,页面必须来自同一个域名(子域名无效),使用同一种协议,在同一个端口上。
②数据保留到通过JavaScript删除或者是用户清除浏览器缓存。
用例:
localStorage.setItema("name","Nicholas");
localStorage.book = "Profession JavaScript";
var name = localStorage.getItem("name");
var book = localStorage.book;
③兼容globalStorage:
function getLocalStorage(){
if(typeof localStorage == "object"){
return localStorage;
}else if(typeof globalStorage == "object"){
retrun globalStorage[location,host];
}else{
throw new Error("no localstorage");
}
3.5 StorageItem类型
①Storage对象中所有存储的每个项目都是StorageItem的实例
□value属性:被存储的值。
□secure属性:只有脚本使用HTTPS协议访问页面才可设置。通过https访问默认为true。
3.6 storage事件
对storage对象进行修改,都会在文档上触发storage事件。其事件对象event有以下属性:
□domain:进行变更的存储的域名。
□key:进行设置或者是删除的键名。
□newValue:要将该键设为的值,如果是删除则为null。
□oldValue:被更改之前的值。
3.7 限制
DOM存储的限制也和浏览器相关。

Javascript 相关文章推荐
ExtJS Grid使用SimpleStore、多选框的方法
Nov 20 Javascript
jQuery语法总结和注意事项小结
Nov 11 Javascript
判断ie的两种简单方法
Aug 12 Javascript
使用jQuery时Form表单元素ID和name命名大忌
Mar 06 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
Mar 18 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
May 27 Javascript
js图片轮播插件的封装
Jul 21 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
Sep 12 Javascript
React组件refs的使用详解
Feb 09 Javascript
Angular 组件之间的交互的示例代码
Mar 24 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
Nov 28 Javascript
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
JavaScript高级程序设计 错误处理与调试学习笔记
Sep 10 #Javascript
JavaScript高级程序设计 事件学习笔记
Sep 10 #Javascript
JavaScript高级程序设计 XML、Ajax 学习笔记
Sep 10 #Javascript
JavaScript高级程序设计 DOM学习笔记
Sep 10 #Javascript
jquery maxlength使用说明
Sep 09 #Javascript
基于jquery可配置循环左右滚动例子
Sep 09 #Javascript
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
Sep 09 #Javascript
You might like
1.PHP简介
2006/10/09 PHP
PHP通过COM使用ADODB的简单例子
2006/12/31 PHP
php文件缓存类汇总
2014/11/21 PHP
php封装的page分页类完整实例
2016/10/18 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
PHP实现时间日期友好显示实现代码
2019/09/08 PHP
TNC vs BOOM BO3 第三场2.13
2021/03/10 DOTA
Jquery 选中表格一列并对表格排序实现原理
2012/12/15 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
2013/10/01 Javascript
浅析Javascript使用include/require
2013/11/13 Javascript
JavaScript插件化开发教程 (二)
2015/01/27 Javascript
javascript鼠标滑动评分控件完整实例
2015/05/13 Javascript
jQuery基于json与cookie实现购物车的方法
2016/04/15 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
2017/03/02 Javascript
js 用于检测类数组对象的函数方法
2017/05/02 Javascript
vue的基本用法与常见指令
2017/08/15 Javascript
利用express启动一个server服务的方法
2017/09/17 Javascript
javascript面向对象三大特征之封装实例详解
2019/07/24 Javascript
JS监听组合按键思路及实现过程
2020/04/17 Javascript
[31:29]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第一场 12.20
2020/12/23 DOTA
python获取Linux下文件版本信息、公司名和产品名的方法
2014/10/05 Python
OpenCV Python实现图像指定区域裁剪
2021/03/12 Python
Python实现中英文全文搜索的示例
2020/12/04 Python
欧洲第一中国智能手机和平板电脑网上商店:CECT-SHOP
2018/01/08 全球购物
美国体育用品商店:Academy Sports + Outdoors
2020/01/04 全球购物
Oasis服装官网:时尚女装在线
2020/07/09 全球购物
安全资料员岗位职责
2013/12/14 职场文书
工作交流会欢迎词
2014/01/12 职场文书
十佳大学生事迹材料
2014/01/29 职场文书
读群众路线心得体会
2014/03/07 职场文书
公司党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2014年银行柜员工作总结
2014/11/12 职场文书
绵山导游词
2015/02/05 职场文书
2015年高三年级组工作总结
2015/07/21 职场文书
浅谈MySQL next-key lock 加锁范围
2021/06/07 MySQL
Java Spring读取和存储详细操作
2022/08/05 Java/Android