JavaScript高级编程———数据存储(cookie、WebStorage)

<script>
/*Cookie 读写删
CookieUtil.get()方法根据cookie的名称获取相应的值,它会在documen.cookie字符串中查找cookie名加上等于号的位置,
如果找到了,那么使用indexof查找该位置之后的第一个分号(表示了该cookie的结束位置)
如果没有找到分号,则表示该cookie是字符串中的最后一个,则余下的字符串都是cookie的值,
该值使用decodeURIComponent()进行解码并最后返回,如果没有发现cookie,则返回null CookieUtil.set() 方法在页面上设置一个 cookie,接收如下几个参数:cookie的名称,cookie的值,
可选的用于指定 cookie何时应被删除的 Date 对象,cookie的可选的 URL路径,可选的域,以及可选的
表示是否要添加 secure 标志的布尔值。 CookieUtil.unset() 方法可以处理这种事情。它接收 4 个参数:
要删除的 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=" + domain;
}
if (secure) {
cookieText += "; secure";
}
document.cookie = cookieText;
},
unset: function (name, path, domain, secure) {
this.set(name, "", new Date(0), path, domain, secure);
}
};
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;
cookieEnd, subCookies, i, parts, result = {};
if (cookieStart > -1) {
cookieEnd = document.cookie.indexOf(";", cookieStart);
if (cookieEnd == -1) {
cookieEnd = document.cookie.length;
}
cookieValue = document.cookie.substring(cookieStart +
cookieName.length, cookieEnd);
if (cookieValue.length > 0) {
subCookies = cookieValue.split("&");
for (i = 0, len = subCookies.length; i < len; i++) {
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) + "=",
subcookieParts = new Array(),
subName;
for (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 += "; domain=" + domain;
}
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);
}
};
//设置cookie
CookieUtil.set("name", "Nicholas");
CookieUtil.set("book", "Professional JavaScript"); //读取cookie的值
var cookieName = CookieUtil.get("name");
var cookieBook = CookieUtil.get("book"); console.log(cookieName);
console.log(cookieBook); //删除cookie
CookieUtil.unset("name");
CookieUtil.unset("book"); //设置 cookie,包括它的路径、域、失效日期
CookieUtil.set("name", "Nicholas", "/GJBC/21/Demo", "www.wrox.com", new Date("January 1, 2020"));
//删除刚刚设置的 cookie
CookieUtil.unset("name", "/GJBC/21/Demo", "www.wrox.com");
//设置安全的 cookie
CookieUtil.set("name", "Nicholas", null, null, null, true); //假设 document.cookie=data=name=Nicholas&book=Professional%20JavaScript
//取得全部子 cookie
//var data = SubCookieUtil.getAll("data");
//alert(data.name); //"Nicholas"
//alert(data.book); //"Professional JavaScript"
////逐个获取子 cookie
//alert(SubCookieUtil.get("data", "name")); //"Nicholas"
//alert(SubCookieUtil.get("data", "book")); //"Professional JavaScript" ////假设 document.cookie=data=name=Nicholas&book=Professional%20JavaScript
////设置两个 cookie
//SubCookieUtil.set("data", "name", "Nicholas");
//SubCookieUtil.set("data", "book", "Professional JavaScript");
////设置全部子 cookie 和失效日期
//SubCookieUtil.setAll("data", { name: "Nicholas", book: "Professional JavaScript" },
//new Date("January 1, 2010"));
////修改名字的值,并修改 cookie 的失效日期
//SubCookieUtil.set("data", "name", "Michael", new Date("February 1, 2010")); ////仅删除名为 name 的子 cookie
//SubCookieUtil.unset("data", "name");
////删除整个 cookie
//SubCookieUtil.unsetAll("data"); /*Web存储机制 WebStorage最早在Web超文本应用技术工作组的Web应用1.0规范中描述的,WebStorage的目的是克服cookie带来的一些限制,
当数据需要被严格控制在客户端上时,无须持续地将数据发回服务器,WebStorage的两个主要目标是
1、提供一种在cookie之外存储会话数据的途径
2、提供一种存储大量可以跨会话存在的数据的机制 Storage类型提供最大的存储空间(因浏览器而异)来存储名值对,Storage的实例与其他对象类似,
Storage 类型只能存储字符串。非字符串的数据在存储之前会被转换成字符串
Storage有以下方法
clear() : 删除所有值;Firefox 中没有实现 。
getItem(name) :根据指定的名字 name 获取对应的值。
 key(index) :获得 index 位置处的值的名字。
 removeItem(name) :删除由 name 指定的名值对儿。
 setItem(name, value) :为指定的 name 设置一个对应的值 sessionStorage 对象
sessionStorage 对象存储特定于某个会话的数据,也就是该数据只保持到浏览器关闭。这个对象
就像会话 cookie,也会在浏览器关闭后消失。存储在 sessionStorage 中的数据可以跨越页面刷新而
存在,同时如果浏览器支持,浏览器崩溃并重启之后依然可用(Firefox 和 WebKit 都支持,IE 则不行)。
*/ //使用方法存储数据
sessionStorage.setItem("name", "Nicholas");
//使用属性存储数据
sessionStorage.book = "Professional JavaScript"; //使用方法读取数据
var SessionStorageName = sessionStorage.getItem("name");
alert(SessionStorageName);
//使用属性读取数据
var bookStorage = sessionStorage.book;
alert(bookStorage); /*还可以通过结果length属性和key()方法来迭代sessionStorage中的值
它是这样遍历sessionStorage中的键值对,首先通过key()方法获取指定位置上的名字,然后再通过getItem()找出对应改名字的值
还可以使用for-in循环来迭代SessionStorage中的值 */
for (var i = 0, len = sessionStorage.length; i < len; i++) {
var key = sessionStorage.key(i);
var value = sessionStorage.getItem(key);
console.log(key + "=" + value);
alert(key + "=" + value);
} //for (var key in sessionStorage) {
// var value = sessionStorage.getItem(key);
// alert(key + "=" + value);
//} //sessionStorage使用removeItem方法删除一个值
sessionStorage.removeItem("book"); /*globalStorage对象,首先要指定那些域可以访问该数据,可以通过方括号标记使用属性来实现*/ /*在这里,访问的是针对域名 wrox.com 的存储空间 */
//保存数据
globalStorage["wrox.com"].name = "Nicholas";
//获取数据
var name = globalStorage["wrox.com"].name; //这里所指定的存储空间只能由来自 www.wrox.com 的页面访问,其他子域名都不行。
//保存数据
globalStorage["www.wrox.com"].name = "Nicholas";
//获取数据
var name = globalStorage["www.wrox.com"].name; //存储数据,任何人都可以访问——不要这样做!
globalStorage[""].name = "Nicholas";
//存储数据,可以让任何以.net 结尾的域名访问——不要这样做!
globalStorage["net"].name = "Nicholas"; //globalStorage 的每个属性都是 Storage 的实例。因此,可以像如下代码中这样使用。
globalStorage["www.wrox.com"].name = "Nicholas";
globalStorage["www.wrox.com"].book = "Professional JavaScript";
globalStorage["www.wrox.com"].removeItem("name");
var book = globalStorage["www.wrox.com"].getItem("book"); //如果你事先不能确定域名,那么使用 location.host 作为属性名比较安全
globalStorage[location.host].name = "Nicholas";
var book = globalStorage[location.host].getItem("book");
/*如果不使用 removeItem() 或者 delete 删除,或者用户未清除浏览器缓存,存储在globalStorage 属性中的数据会一直保留在磁盘上。
这让 globalStorage 非常适合在客户端存储文档或者长期保存用户偏好设置*/ /*localStorage对象必须来自同一个域名(子域名无效),使用同一种协议,在同一个端口上,这相当于globalStorage*/ //使用方法存储数据
localStorage.setItem("name", "Nicholas");
//使用属性存储数据
localStorage.book = "Professional JavaScript";
//使用方法读取数据
var name = localStorage.getItem("name");
//使用属性读取数据
var book = localStorage.book; //为了兼容只支持 globalStorage 的浏览器,可以使用以下函数。
function getLocalStorage(){
if (typeof localStorage == "object"){
return localStorage;
} else if (typeof globalStorage == "object"){
return globalStorage[location.host];
} else {
throw new Error("Local storage not available.");
}
} var storage = getLocalStorage();
</script>

  

JavaScript高级编程———数据存储(cookie、WebStorage)的更多相关文章

  1. JavaScript高级编程———JSON

    JavaScript高级编程———JSON < script > /*JSON的语法可以表达一下三种类型的值 简单值:使用与javas相同的语法,可以在JSON中表达字符串.数值.布尔值和 ...

  2. JavaScript高级编程——Array数组迭代(every()、filter()、foreach()、map()、some(),归并(reduce() 和reduceRight() ))

    JavaScript高级编程——Array数组迭代(every().filter().foreach().map().some(),归并(reduce() 和reduceRight() )) < ...

  3. JavaScript高级编程——引用类型、Array数组使用、栈方法

    JavaScript高级编程——引用类型.Array数组使用.栈方法 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999 ...

  4. javascript高级编程笔记01(基本概念)

    1.在html中使用JavaScript 1.  <script> 元素 <script>定义了下列6个属性: async:可选,异步下载外部脚本文件. charset:可选, ...

  5. JavaScript高级编程———基本包装类型String和单体内置对象Math

    JavaScript高级编程———基本包装类型和单体内置对象 <script> var stringObject = new String("hello world") ...

  6. JavaScript高级编程——Date类型

    JavaScript高级编程——Date类型 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ...

  7. 23. javacript高级程序设计-数据存储

    1. 数据存储 1.1 cookie HTTP Cookie, cookie,最初用来在客户端存储回话信息. (1). 限制,不同浏览器对特定域名下的cookie 的个数有限制,每个域名下最好不要操过 ...

  8. JavaScript笔记01——数据存储(包括.js文件的引用)

    While, generally speaking, HTML is for content and CSS is for presentation, JavaScript is for intera ...

  9. 客户端数据存储cookie、localStoeage、sessionStorage(小记)

    一.数据存储分为客户端存储和服务端存储 1.而对于客户端存储,在html5以前只能通过cookie来实现:html 5以后增加了web存储(实际保存本地)的功能   (1)对于web存储有两个标准: ...

随机推荐

  1. C++多线程编程一

    1.C++多线程初步: #include <iostream> #include <thread> #include <Windows.h> using names ...

  2. SaltStack Pillar 详解

    简介 grains用于存储静态不易变更的数据,而pillar一般用于存储动态, 敏感的数据,通过minion和master设置或获取grains信息,而pillar信息只能在master端配置,在到m ...

  3. 架构师养成记--17.disrunptor 多生产者多消费者

    入口: import java.nio.ByteBuffer; import java.util.UUID; import java.util.concurrent.CountDownLatch; i ...

  4. 【JavaScript】类继承(对象冒充)和原型继承__深入理解原型和原型链

    JavaScript里的继承方式在很多书上分了很多类型和实现方式,大体上就是两种:类继承(对象冒充)和原型继承. 类继承(对象冒充):在函数内部定义自身的属性的方法,子类继承时,用call或apply ...

  5. 使用selenium的WebDriver和ChromeDriver实现UI自动化

    下载chromedriver chromedriver与chrome的对应关系表:http://blog.csdn.net/huilan_same/article/details/51896672 下 ...

  6. 编辑距离 区间dp

    题目描述 设A和B是两个字符串.我们要用最少的字符操作次数,将字符串A转换为字符串B.这里所说的字符操作共有三种: 1.删除一个字符: 2.插入一个字符: 3.将一个字符改为另一个字符: !皆为小写字 ...

  7. Python基础部分的疑惑解析——运算符和数据类型(5)

    运算符 最后得到数值的: 算数运算符 赋值运算符 最后得到布尔值的: 成员运算符:in   not in 逻辑运算符    and   or   没有优先级就是按顺序执行 比较运算符 数据类型 1.整 ...

  8. Hibernate 查询数据库中的数据

    1.Criteria介绍 Criteria与Session绑定,其生命周期跟随着Session结束而结束,使用Criteria时进行查询时,每次都要于执行时期动态建立物件,并加入各种查询条件,随着Se ...

  9. Could not parse UiSelector argument: 'XXX' is not a string 错误解决办法

    ebDriverWait(driver,20).until(EC.visibility_of_element_located((MobileBy.ANDROID_UIAUTOMATOR,new UiS ...

  10. 介绍&代码

    之前参考前辈实现的分页组件,还ok. 介绍: 基于Web,实现分页样式 和 控制页面内容数据的展示形式. 实现: from django.utils.safestring import mark_sa ...