JavaScript高级编程———数据存储（cookie、WebStorage）
1<script> 2 /*Cookie 读写删 3 CookieUtil.get()方法根据cookie的名称获取相应的值,它会在documen.cookie字符串中查找cookie名加上等于号的位置, 4 如果找到了,那么使用indexof查找该位置之后的第一个分号(表示了该cookie的结束位置) 5 如果没有找到分号,则表示该cookie是字符串中的最后一个,则余下的字符串都是cookie的值, 6 该值使用decodeURIComponent()进行解码并最后返回,如果没有发现cookie,则返回null 7 8 CookieUtil.set() 方法在页面上设置一个 cookie，接收如下几个参数：cookie的名称，cookie的值， 9 可选的用于指定 cookie何时应被删除的 Date 对象，cookie的可选的 URL路径，可选的域，以及可选的 10 表示是否要添加 secure 标志的布尔值。 11 12 CookieUtil.unset() 方法可以处理这种事情。它接收 4 个参数： 13 要删除的 cookie 的名称、可选的路径参数、可选的域参数和可选的安全参数 14 */ 15 var CookieUtil = { 16 get: function (name) { 17 var cookieName = encodeURIComponent(name) + "=", cookieStart = document.cookie.indexOf(cookieName), cookieValue = null; 18 if (cookieStart > -1) { 19 var cookieEnd = document.cookie.indexOf(";", cookieStart); 20 if (cookieEnd == -1) { 21 cookieEnd = document.cookie.length; 22 } 23 cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd)); 24 } 25 return cookieValue; 26 }, 27 set: function (name, value, expires, path, domain, secure) { 28 var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value); 29 if (expires instanceof Date) { 30 cookieText += "; expires=" + expires.toGMTString(); 31 } 32 if (path) { 33 cookieText += "; path=" + path; 34 } 35 if (domain) { 36 cookieText += "; domain=" + domain; 37 } 38 if (secure) { 39 cookieText += "; secure"; 40 } 41 document.cookie = cookieText; 42 }, 43 unset: function (name, path, domain, secure) { 44 this.set(name, "", new Date(0), path, domain, secure); 45 } 46 }; 47 var subCookieUtil = { 48 get: function (name, subName) { 49 var subCookies = this.getAll(name); 50 if (subCookies) { 51 return subCookies[subName]; 52 } else { 53 return null; 54 } 55 }, 56 getAll: function (name) { 57 var cookieName = encodeURIComponent(name) + "=", cookieStart = document.cookie.indexOf(cookieName), cookieValue = null; 58 cookieEnd, subCookies, i, parts, result = {}; 59 if (cookieStart > -1) { 60 cookieEnd = document.cookie.indexOf(";", cookieStart); 61 if (cookieEnd == -1) { 62 cookieEnd = document.cookie.length; 63 } 64 cookieValue = document.cookie.substring(cookieStart + 65 cookieName.length, cookieEnd); 66 if (cookieValue.length > 0) { 67 subCookies = cookieValue.split("&"); 68 for (i = 0, len = subCookies.length; i < len; i++) { 69 parts = subCookies[i].split("="); 70 result[decodeURIComponent(parts[0])] = 71 decodeURIComponent(parts[1]); 72 } 73 return result; 74 } 75 } 76 return null; 77 }, 78 set: function (name, subName, value, expires, path, domain, secure) { 79 var subcookies = this.getAll(name) || {}; 80 subcookies[subName] = value; 81 this.setAll(name, subcookies, expires, path, domain, secure); 82 }, 83 setAll: function (name, subcookies, expires, path, domain, secure) { 84 var cookieText = encodeURIComponent(name) + "=", 85 subcookieParts = new Array(), 86 subName; 87 for (subName in subcookies) { 88 if (subName.length > 0 && subcookies.hasOwnProperty(subName)) { 89 subcookieParts.push(encodeURIComponent(subName) + "=" + 90 encodeURIComponent(subcookies[subName])); 91 } 92 } 93 if (cookieParts.length > 0) { 94 cookieText += subcookieParts.join("&"); 95 if (expires instanceof Date) { 96 cookieText += "; expires=" + expires.toGMTString(); 97 } 98 if (path) { 99 cookieText += "; path=" + path; 100 } 101 if (domain) { 102 cookieText += "; domain=" + domain; 103 } 104 if (secure) { 105 cookieText += "; secure"; 106 } 107 } else { 108 cookieText += "; expires=" + (new Date(0)).toGMTString(); 109 } 110 document.cookie = cookieText; 111 }, 112 unset: function (name, subName, path, domain, secure) { 113 var subcookies = this.getAll(name); 114 if (subcookies) { 115 delete subcookies[subName]; 116 this.setAll(name, subcookies, null, path, domain, secure); 117 } 118 }, 119 unsetAll: function (name, path, domain, secure) { 120 this.setAll(name, null, new Date(0), path, domain, secure); 121 } 122 }; 123 //设置cookie 124 CookieUtil.set("name", "Nicholas"); 125 CookieUtil.set("book", "Professional JavaScript"); 126 127 //读取cookie的值 128 var cookieName = CookieUtil.get("name"); 129 var cookieBook = CookieUtil.get("book"); 130 131 console.log(cookieName); 132 console.log(cookieBook); 133 134 //删除cookie 135 CookieUtil.unset("name"); 136 CookieUtil.unset("book"); 137 138 //设置 cookie，包括它的路径、域、失效日期 139 CookieUtil.set("name", "Nicholas", "/GJBC/21/Demo", "www.wrox.com", new Date("January 1, 2020")); 140 //删除刚刚设置的 cookie 141 CookieUtil.unset("name", "/GJBC/21/Demo", "www.wrox.com"); 142 //设置安全的 cookie 143 CookieUtil.set("name", "Nicholas", null, null, null, true); 144 145 //假设 document.cookie=data=name=Nicholas&book=Professional%20JavaScript 146 //取得全部子 cookie 147 //var data = SubCookieUtil.getAll("data"); 148 //alert(data.name); //"Nicholas" 149 //alert(data.book); //"Professional JavaScript" 150 ////逐个获取子 cookie 151 //alert(SubCookieUtil.get("data", "name")); //"Nicholas" 152 //alert(SubCookieUtil.get("data", "book")); //"Professional JavaScript" 153 154 155 ////假设 document.cookie=data=name=Nicholas&book=Professional%20JavaScript 156 ////设置两个 cookie 157 //SubCookieUtil.set("data", "name", "Nicholas"); 158 //SubCookieUtil.set("data", "book", "Professional JavaScript"); 159 ////设置全部子 cookie 和失效日期 160 //SubCookieUtil.setAll("data", { name: "Nicholas", book: "Professional JavaScript" }, 161 //new Date("January 1, 2010")); 162 ////修改名字的值，并修改 cookie 的失效日期 163 //SubCookieUtil.set("data", "name", "Michael", new Date("February 1, 2010")); 164 165 ////仅删除名为 name 的子 cookie 166 //SubCookieUtil.unset("data", "name"); 167 ////删除整个 cookie 168 //SubCookieUtil.unsetAll("data"); 169 170 171 172 /*Web存储机制 WebStorage最早在Web超文本应用技术工作组的Web应用1.0规范中描述的,WebStorage的目的是克服cookie带来的一些限制, 173 当数据需要被严格控制在客户端上时,无须持续地将数据发回服务器,WebStorage的两个主要目标是 174 1、提供一种在cookie之外存储会话数据的途径 175 2、提供一种存储大量可以跨会话存在的数据的机制 176 177 Storage类型提供最大的存储空间(因浏览器而异)来存储名值对,Storage的实例与其他对象类似, 178 Storage 类型只能存储字符串。非字符串的数据在存储之前会被转换成字符串 179 Storage有以下方法 180 clear() ： 删除所有值；Firefox 中没有实现 。 181 getItem(name) ：根据指定的名字 name 获取对应的值。 182 key(index) ：获得 index 位置处的值的名字。 183 removeItem(name) ：删除由 name 指定的名值对儿。 184 setItem(name, value) ：为指定的 name 设置一个对应的值 185 186 sessionStorage 对象 187 sessionStorage 对象存储特定于某个会话的数据，也就是该数据只保持到浏览器关闭。这个对象 188 就像会话 cookie，也会在浏览器关闭后消失。存储在 sessionStorage 中的数据可以跨越页面刷新而 189 存在，同时如果浏览器支持，浏览器崩溃并重启之后依然可用（Firefox 和 WebKit 都支持，IE 则不行）。 190 */ 191 192 //使用方法存储数据 193 sessionStorage.setItem("name", "Nicholas"); 194 //使用属性存储数据 195 sessionStorage.book = "Professional JavaScript"; 196 197 //使用方法读取数据 198 var SessionStorageName = sessionStorage.getItem("name"); 199 alert(SessionStorageName); 200 //使用属性读取数据 201 var bookStorage = sessionStorage.book; 202 alert(bookStorage); 203 204 /*还可以通过结果length属性和key()方法来迭代sessionStorage中的值 205 它是这样遍历sessionStorage中的键值对,首先通过key()方法获取指定位置上的名字,然后再通过getItem()找出对应改名字的值 206 还可以使用for-in循环来迭代SessionStorage中的值 207 208 */ 209 for (var i = 0, len = sessionStorage.length; i < len; i++) { 210 var key = sessionStorage.key(i); 211 var value = sessionStorage.getItem(key); 212 console.log(key + "=" + value); 213 alert(key + "=" + value); 214 } 215 216 //for (var key in sessionStorage) { 217 // var value = sessionStorage.getItem(key); 218 // alert(key + "=" + value); 219 //} 220 221 //sessionStorage使用removeItem方法删除一个值 222 sessionStorage.removeItem("book"); 223 224 /*globalStorage对象,首先要指定那些域可以访问该数据,可以通过方括号标记使用属性来实现*/ 225 226 /*在这里，访问的是针对域名 wrox.com 的存储空间 */ 227 //保存数据 228 globalStorage["wrox.com"].name = "Nicholas"; 229 //获取数据 230 var name = globalStorage["wrox.com"].name; 231 232 //这里所指定的存储空间只能由来自 www.wrox.com 的页面访问，其他子域名都不行。 233 //保存数据 234 globalStorage["www.wrox.com"].name = "Nicholas"; 235 //获取数据 236 var name = globalStorage["www.wrox.com"].name; 237 238 //存储数据，任何人都可以访问——不要这样做！ 239 globalStorage[""].name = "Nicholas"; 240 //存储数据，可以让任何以.net 结尾的域名访问——不要这样做！ 241 globalStorage["net"].name = "Nicholas"; 242 243 244 //globalStorage 的每个属性都是 Storage 的实例。因此，可以像如下代码中这样使用。 245 globalStorage["www.wrox.com"].name = "Nicholas"; 246 globalStorage["www.wrox.com"].book = "Professional JavaScript"; 247 globalStorage["www.wrox.com"].removeItem("name"); 248 var book = globalStorage["www.wrox.com"].getItem("book"); 249 250 //如果你事先不能确定域名，那么使用 location.host 作为属性名比较安全 251 globalStorage[location.host].name = "Nicholas"; 252 var book = globalStorage[location.host].getItem("book"); 253 /*如果不使用 removeItem() 或者 delete 删除，或者用户未清除浏览器缓存，存储在globalStorage 属性中的数据会一直保留在磁盘上。 254 这让 globalStorage 非常适合在客户端存储文档或者长期保存用户偏好设置*/ 255 256 /*localStorage对象必须来自同一个域名(子域名无效),使用同一种协议,在同一个端口上,这相当于globalStorage*/ 257 258 //使用方法存储数据 259 localStorage.setItem("name", "Nicholas"); 260 //使用属性存储数据 261 localStorage.book = "Professional JavaScript"; 262 //使用方法读取数据 263 var name = localStorage.getItem("name"); 264 //使用属性读取数据 265 var book = localStorage.book; 266 267 //为了兼容只支持 globalStorage 的浏览器，可以使用以下函数。 268 function getLocalStorage(){ 269 if (typeof localStorage == "object"){ 270 return localStorage; 271 } else if (typeof globalStorage == "object"){ 272 return globalStorage[location.host]; 273 } else { 274 throw new Error("Local storage not available."); 275 } 276 } 277 278 var storage = getLocalStorage(); 279 </script>