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>
生命中最值得欣慰的,莫过于一觉醒来,你还在身旁