JavaScript高级编程———数据存储(cookie、WebStorage)
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)的更多相关文章
- JavaScript高级编程———JSON
JavaScript高级编程———JSON < script > /*JSON的语法可以表达一下三种类型的值 简单值:使用与javas相同的语法,可以在JSON中表达字符串.数值.布尔值和 ...
- JavaScript高级编程——Array数组迭代(every()、filter()、foreach()、map()、some(),归并(reduce() 和reduceRight() ))
JavaScript高级编程——Array数组迭代(every().filter().foreach().map().some(),归并(reduce() 和reduceRight() )) < ...
- JavaScript高级编程——引用类型、Array数组使用、栈方法
JavaScript高级编程——引用类型.Array数组使用.栈方法 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999 ...
- javascript高级编程笔记01(基本概念)
1.在html中使用JavaScript 1. <script> 元素 <script>定义了下列6个属性: async:可选,异步下载外部脚本文件. charset:可选, ...
- JavaScript高级编程———基本包装类型String和单体内置对象Math
JavaScript高级编程———基本包装类型和单体内置对象 <script> var stringObject = new String("hello world") ...
- JavaScript高级编程——Date类型
JavaScript高级编程——Date类型 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ...
- 23. javacript高级程序设计-数据存储
1. 数据存储 1.1 cookie HTTP Cookie, cookie,最初用来在客户端存储回话信息. (1). 限制,不同浏览器对特定域名下的cookie 的个数有限制,每个域名下最好不要操过 ...
- JavaScript笔记01——数据存储(包括.js文件的引用)
While, generally speaking, HTML is for content and CSS is for presentation, JavaScript is for intera ...
- 客户端数据存储cookie、localStoeage、sessionStorage(小记)
一.数据存储分为客户端存储和服务端存储 1.而对于客户端存储,在html5以前只能通过cookie来实现:html 5以后增加了web存储(实际保存本地)的功能 (1)对于web存储有两个标准: ...
随机推荐
- 快速搭建微信小程序开发环境
1.工具软件: 注:本文介绍的工具软件已分享到百度云盘,直接下载并按照本文介绍安装即可. 开发工具 v0.7 百度云链接: https://pan.baidu.com/s/1jIQ7i8A密码: aq ...
- kali系统越来越大解决
Kali Linux系统提供的apt-get方式,可以很好的安装软件,对系统进行更新.但是每次执行都会下载大量的软件包.这些软件包被安装后,并不会被自动删掉,会持续占用磁盘空间.解决这个问题有两个办法 ...
- google Agent
一句话:改HOSTS文件 有时候要查看appengine.google.com的后台,但死活上不去,怎么办?还是那个老办法: 1.在cmd下Ping www.google.com.hk,获得IP地址, ...
- HDU-1160-FatMouse's Speed(线性DP,LIS)
FatMouse's Speed Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
- docker 限制 容器内存 使用
转载 : https://www.cnblogs.com/sparkdev/p/8032330.html 默认情况下容器使用的资源是不受限制的.也就是可以使用主机内核调度器所允许的最大资源.但是在容器 ...
- win10 ping不通所有地址
电脑使用的很正常,是公司内网,但是在昨天测试数据库连接的时候,所有的地址都ping不通了.原先是可以ping通的,然后各种查,各种尝试. 清空dns缓存, cmd命令查看dns缓存:ipconfig ...
- 2018焦作网络赛 - Poor God Water 一道水题的教训
本题算是签到题,但由于赛中花费了过多的时间去滴吧格,造成了不必要的浪费以及智商掉线,所以有必要记录一下坑点 题意:方格从1到n,每一格mjl可以选择吃鱼/巧克力/鸡腿,求走到n格时满足 1.每三格不可 ...
- [转] Spark sql 内置配置(V2.2)
[From] https://blog.csdn.net/u010990043/article/details/82842995 最近整理了一下spark SQL内置配.加粗配置项是对sparkSQL ...
- HLS:跑马灯实验
跑马灯实验的第一部分记录: 1. vivado 2018.2的HLS在跑C/RTL co-simulation的时候,一直报错,不论是用modelsim 还是vivado自带的similator.使用 ...
- (转)mysql -prompt选项
mysql -prompt选项 原文:http://www.cnblogs.com/abclife/p/5632826.html 使用-pormpt修改提示符.可以在登录时或者在登录后使用prompt ...