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. FutureTask与Fork/Join

    在学习多线程的过程中,我们形成了一种思维习惯.那就是对于某个耗时操作不再做同步操作,让他分裂成一个线程之后执行下一步,而线程执行耗时操作.并且我们希望在我们需要它返回的时候再去调用它的结果集.好比我们 ...

  2. XMPPFramework核心类介绍

    XMPPFramework结构 在进入下一步之前,先给大家讲讲XMPPFramework的目录结构,以便新手们更容易读懂文章.我们来看看下图: 虽然这里有很多个目录,但是我们在开发中基本只关心Core ...

  3. ArrayList集合与List与数组的区别

    import java.util.ArrayList; import java.util.Arrays; import java.util.Iterator; import java.util.Lis ...

  4. QuantLib 金融计算——基本组件之 InterestRate 类

    目录 QuantLib 金融计算--基本组件之 InterestRate 类 InterestRate 对象的构造 一些常用的成员函数 如果未做特别说明,文中的程序都是 Python3 代码. Qua ...

  5. 新手入门贴之基于 python 语言的接口自动化 demo 小实战

    大家好,我是正在学习接口测试的菜鸟.近期通过自己的学习,完成了一个关于测试接口的接口自动化demo.下面想跟大家分享一下,主要的思路是根据接口文档确定测试用例,并将测试用例写在excel中.因为只是小 ...

  6. Google Spanner vs Amazon Aurora: Who’ll Get the Enterprise?

    https://www.clustrix.com/bettersql/spanner-vs-aurora/ Google Spanner versus Amazon Aurora In July 20 ...

  7. springcloud(九)-Feign使用Hystrix

    前言 上一篇我们使用注解@HystrixCommond的fallbackMethod属性实现回退.然而,Feign是以接口形式工作的,它没有方法体,上一篇讲解的方式显然不适用于Feign. 那么Fei ...

  8. laravel 表单接收

    POST方式接收 视图层 <form action="/submit" method="post"> {{csrf_field()}}    //必 ...

  9. excel 快速填充所有非连续空白单元格

    工作中经常会碰到这样的表,需要把空白的单元格填充完成.变成后图.下面就是方法.       工具/原料 EXCEL 方法/步骤   首先选中你要填充的区域,   按“F5"或者 Ctrl + ...

  10. 关于.NET中FileSystemWatcher的一些不被人注意的细节

    .NET 中的FileSystemWatcher可以监控文件系统中的更改.新建.删除和重命名,关于它的事件及属性的讨论有许多,但细节性的具体在什么情况下触发这些事件讨论不多.根据个人测试,总结如下: ...