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 相关文章推荐
jquery仿QQ登录账号选择下拉框效果
Mar 22 Javascript
JS 拦截全局ajax请求实例解析
Nov 29 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
ES6新数据结构Set与WeakSet用法分析
Mar 31 Javascript
JS奇技之利用scroll来监听resize详解
Jun 15 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
Aug 08 Javascript
利用CDN加速react webpack打包后的文件详解
Feb 22 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
Sep 27 Javascript
原生JS实现的跳一跳小游戏完整实例
Jan 27 Javascript
基于Vue SEO的四种方案(小结)
Jul 01 Javascript
vue中监听返回键问题
Aug 28 Javascript
JS如何实现在弹出窗口中加载页面
Dec 03 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中日期加减法运算实现代码
2011/12/08 PHP
javascript unicode与GBK2312(中文)编码转换方法
2013/11/14 Javascript
jquery获取当前点击对象的value方法
2014/02/28 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
2015/06/18 Javascript
深入理解React中es6创建组件this的方法
2016/08/29 Javascript
AngularJs验证重复密码的方法(两种)
2016/11/25 Javascript
AngularJS中的缓存使用
2017/01/11 Javascript
jQuery弹出层插件popShow用法示例
2017/01/23 Javascript
BootStrapValidator初使用教程详解
2017/02/10 Javascript
AngularJS ui-router (嵌套路由)实例
2017/03/10 Javascript
js事件委托和事件代理案例分享
2017/07/25 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
2017/10/26 Javascript
JavaScript惰性求值的一种实现方法示例
2019/01/11 Javascript
利用Webpack实现小程序多项目管理的方法
2019/02/25 Javascript
微信小程序 云开发模糊查询实现解析
2019/09/02 Javascript
世界上最短的数字判断js代码
2019/09/09 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
2019/11/15 Javascript
ES6中Set和Map用法实例详解
2020/03/02 Javascript
Python中的条件判断语句基础学习教程
2016/02/07 Python
Python+Socket实现基于TCP协议的客户与服务端中文自动回复聊天功能示例
2017/08/31 Python
Python2和Python3中print的用法示例总结
2017/10/25 Python
Python基于更相减损术实现求解最大公约数的方法
2018/04/04 Python
Python实现的批量修改文件后缀名操作示例
2018/12/07 Python
Python类装饰器实现方法详解
2018/12/21 Python
django的ORM操作 增加和查询
2019/07/26 Python
Python标准库:内置函数max(iterable, *[, key, default])说明
2020/04/25 Python
美国学校校服,儿童和婴儿服装:Cookie’s Kids
2016/10/14 全球购物
Myprotein芬兰官网:欧洲第一运动营养品牌
2019/05/05 全球购物
写给妈妈的道歉信
2014/01/11 职场文书
英文商务邀请信
2014/01/22 职场文书
美发店5.1活动方案
2014/01/24 职场文书
求职信怎么写范文
2014/05/26 职场文书
国贸专业毕业求职信
2014/06/11 职场文书
西柏坡导游词
2015/02/05 职场文书
后勤个人工作总结
2015/02/28 职场文书
Java 异步任务计算FutureTask
2022/04/28 Java/Android