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 相关文章推荐
基于MooTools的很有创意的滚动条时钟动画
Nov 14 Javascript
js 火狐下取本地路径实现思路
Apr 02 Javascript
jquery简单实现鼠标经过导航条改变背景图
Dec 17 Javascript
jquery实现简单实用的弹出层效果代码
Oct 15 Javascript
jQuery解析json数据实例分析
Nov 24 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
Dec 13 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
Sep 15 Javascript
vue、react等单页面项目应该这样子部署到服务器
Jan 03 Javascript
vue视频播放插件vue-video-player的具体使用方法
Nov 08 Javascript
javascript canvas实现简易时钟例子
Sep 05 Javascript
vue 自定义的组件绑定点击事件
Apr 21 Vue.js
JavaScript中10个Reduce常用场景技巧
Jun 21 Javascript
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
解析PHP中VC6 X86和VC9 X86的区别及 Non Thread Safe的意思
2013/06/28 PHP
解析php开发中的中文编码问题
2013/08/08 PHP
js操纵dom生成下拉列表框的方法
2014/02/24 Javascript
javascript中关于&amp;&amp; 和 || 表达式的小技巧分享
2015/04/10 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
2016/06/20 Javascript
深究AngularJS中$sce的使用
2017/06/12 Javascript
动手写一个angular版本的Message组件的方法
2017/12/16 Javascript
nodejs简单实现TCP服务器端和客户端的聊天功能示例
2018/01/04 NodeJs
p5.js临摹动态图形的方法
2019/10/23 Javascript
使用js获取身份证年龄的示例代码
2020/12/11 Javascript
[01:01:41]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第二场 1月31日
2021/03/11 DOTA
Python代理抓取并验证使用多线程实现
2013/05/03 Python
老生常谈进程线程协程那些事儿
2017/07/24 Python
Numpy数组的保存与读取方法
2018/04/04 Python
利用Python读取txt文档的方法讲解
2018/06/23 Python
Python中安装easy_install的方法
2018/11/18 Python
python实现AES加密解密
2019/03/28 Python
Python使用线程来接收串口数据的示例
2019/07/02 Python
如何通过50行Python代码获取公众号全部文章
2019/07/12 Python
Python安装OpenCV的示例代码
2020/03/05 Python
Python 中由 yield 实现异步操作
2020/05/04 Python
python中format函数如何使用
2020/06/22 Python
如何将json数据转换为python数据
2020/09/04 Python
DHC美国官网:日本通信销售第一的化妆品品牌
2017/11/12 全球购物
美国第二大连锁书店:Books-A-Million
2017/12/28 全球购物
西班牙在线宠物食品和配件商店:bitiba
2019/10/11 全球购物
前厅部经理岗位职责范文
2014/02/04 职场文书
团干部培训方案
2014/06/03 职场文书
初中优秀教师事迹材料
2014/08/18 职场文书
2014党员民主评议个人思想剖析发言
2014/09/19 职场文书
普通党员四风问题对照检查材料
2014/09/27 职场文书
维稳承诺书
2015/01/20 职场文书
保送生自荐信
2015/03/06 职场文书
python双向链表实例详解
2022/05/25 Python
python绘制云雨图raincloud plot
2022/08/05 Python
Java实现贪吃蛇游戏的示例代码
2022/09/23 Java/Android