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 相关文章推荐
JavaScript显示当然日期和时间即年月日星期和时间
Oct 29 Javascript
JavaScript检查某个function是否是原生代码的方法
Aug 20 Javascript
jQuery调用ajax请求的常见方法汇总
Mar 24 Javascript
AngularJS延迟加载html template
Jul 27 Javascript
jQuery事件绑定用法详解
Sep 08 Javascript
在localStorage中存储对象数组并读取的方法
Sep 24 Javascript
js控制div层的叠加简单方法
Oct 15 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
Mar 23 Javascript
微信小程序实现多个按钮的颜色状态转换
Feb 15 Javascript
Node.js使用supervisor进行开发中调试的方法
Mar 26 Javascript
angular异步验证防抖踩坑实录
Dec 01 Javascript
Python版实现微信公众号扫码登陆
May 28 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
基于mysql的论坛(3)
2006/10/09 PHP
Windows2003 下 MySQL 数据库每天自动备份
2006/12/21 PHP
PHP 观察者模式的实现代码
2013/05/10 PHP
解析PHP跨站刷票的实现代码
2013/06/18 PHP
Yii框架获取当前controlle和action对应id的方法
2014/12/03 PHP
yii实现CheckBox复选框在同一行显示的方法
2014/12/03 PHP
详谈symfony window下的安装 安装时候出现的问题以及解决方法
2017/09/28 PHP
php 处理png图片白色背景色改为透明色的实例代码
2018/12/10 PHP
JavaScript 学习笔记 Black.Caffeine 09.11.28
2009/11/30 Javascript
仿jQuery的siblings效果的js代码
2011/08/09 Javascript
原生js实现图片轮播特效
2015/12/18 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
2015/12/24 Javascript
window.onerror()的用法与实例分析
2016/01/27 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
2018/08/28 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
2019/04/17 Javascript
vue设置动态请求地址的例子
2019/11/01 Javascript
[03:18]【TI9纪实】社区大触GL与木木
2019/08/25 DOTA
python实现保存网页到本地示例
2014/03/16 Python
Python 读取某个目录下所有的文件实例
2018/06/23 Python
Python使用sort和class实现的多级排序功能示例
2018/08/15 Python
python爬取微信公众号文章
2018/08/31 Python
python使用response.read()接收json数据的实例
2018/12/19 Python
对python中词典的values值的修改或新增KEY详解
2019/01/20 Python
详解python3安装pillow后报错没有pillow模块以及没有PIL模块问题解决
2019/04/17 Python
基于python实现百度翻译功能
2019/05/09 Python
Django使用uwsgi部署时的配置以及django日志文件的处理方法
2019/08/30 Python
Python实现图片批量加入水印代码实例
2019/11/30 Python
Python命令行click参数用法解析
2019/12/19 Python
Python使用Excel将数据写入多个sheet
2020/05/16 Python
python 获取字典键值对的实现
2020/11/12 Python
自主实习接收函
2014/01/13 职场文书
乔迁之喜主持词
2014/03/27 职场文书
中考标语大全
2014/06/05 职场文书
解决 Redis 秒杀超卖场景的高并发
2022/04/12 Redis
Redis如何实现验证码发送 以及限制每日发送次数
2022/04/18 Redis
python区块链实现简版工作量证明
2022/05/25 Python