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. ////假设 document.cookie=data=name=Nicholas&book=Professional%20JavaScript
  155. ////设置两个 cookie
  156. //SubCookieUtil.set("data", "name", "Nicholas");
  157. //SubCookieUtil.set("data", "book", "Professional JavaScript");
  158. ////设置全部子 cookie 和失效日期
  159. //SubCookieUtil.setAll("data", { name: "Nicholas", book: "Professional JavaScript" },
  160. //new Date("January 1, 2010"));
  161. ////修改名字的值,并修改 cookie 的失效日期
  162. //SubCookieUtil.set("data", "name", "Michael", new Date("February 1, 2010"));
  163.  
  164. ////仅删除名为 name 的子 cookie
  165. //SubCookieUtil.unset("data", "name");
  166. ////删除整个 cookie
  167. //SubCookieUtil.unsetAll("data");
  168.  
  169. /*Web存储机制 WebStorage最早在Web超文本应用技术工作组的Web应用1.0规范中描述的,WebStorage的目的是克服cookie带来的一些限制,
  170. 当数据需要被严格控制在客户端上时,无须持续地将数据发回服务器,WebStorage的两个主要目标是
  171. 1、提供一种在cookie之外存储会话数据的途径
  172. 2、提供一种存储大量可以跨会话存在的数据的机制
  173.  
  174. Storage类型提供最大的存储空间(因浏览器而异)来存储名值对,Storage的实例与其他对象类似,
  175. Storage 类型只能存储字符串。非字符串的数据在存储之前会被转换成字符串
  176. Storage有以下方法
  177. clear() : 删除所有值;Firefox 中没有实现 。
  178. getItem(name) :根据指定的名字 name 获取对应的值。
  179.  key(index) :获得 index 位置处的值的名字。
  180.  removeItem(name) :删除由 name 指定的名值对儿。
  181.  setItem(name, value) :为指定的 name 设置一个对应的值
  182.  
  183. sessionStorage 对象
  184. sessionStorage 对象存储特定于某个会话的数据,也就是该数据只保持到浏览器关闭。这个对象
  185. 就像会话 cookie,也会在浏览器关闭后消失。存储在 sessionStorage 中的数据可以跨越页面刷新而
  186. 存在,同时如果浏览器支持,浏览器崩溃并重启之后依然可用(Firefox 和 WebKit 都支持,IE 则不行)。
  187. */
  188.  
  189. //使用方法存储数据
  190. sessionStorage.setItem("name", "Nicholas");
  191. //使用属性存储数据
  192. sessionStorage.book = "Professional JavaScript";
  193.  
  194. //使用方法读取数据
  195. var SessionStorageName = sessionStorage.getItem("name");
  196. alert(SessionStorageName);
  197. //使用属性读取数据
  198. var bookStorage = sessionStorage.book;
  199. alert(bookStorage);
  200.  
  201. /*还可以通过结果length属性和key()方法来迭代sessionStorage中的值
  202. 它是这样遍历sessionStorage中的键值对,首先通过key()方法获取指定位置上的名字,然后再通过getItem()找出对应改名字的值
  203. 还可以使用for-in循环来迭代SessionStorage中的值
  204.  
  205. */
  206. for (var i = 0, len = sessionStorage.length; i < len; i++) {
  207. var key = sessionStorage.key(i);
  208. var value = sessionStorage.getItem(key);
  209. console.log(key + "=" + value);
  210. alert(key + "=" + value);
  211. }
  212.  
  213. //for (var key in sessionStorage) {
  214. // var value = sessionStorage.getItem(key);
  215. // alert(key + "=" + value);
  216. //}
  217.  
  218. //sessionStorage使用removeItem方法删除一个值
  219. sessionStorage.removeItem("book");
  220.  
  221. /*globalStorage对象,首先要指定那些域可以访问该数据,可以通过方括号标记使用属性来实现*/
  222.  
  223. /*在这里,访问的是针对域名 wrox.com 的存储空间 */
  224. //保存数据
  225. globalStorage["wrox.com"].name = "Nicholas";
  226. //获取数据
  227. var name = globalStorage["wrox.com"].name;
  228.  
  229. //这里所指定的存储空间只能由来自 www.wrox.com 的页面访问,其他子域名都不行。
  230. //保存数据
  231. globalStorage["www.wrox.com"].name = "Nicholas";
  232. //获取数据
  233. var name = globalStorage["www.wrox.com"].name;
  234.  
  235. //存储数据,任何人都可以访问——不要这样做!
  236. globalStorage[""].name = "Nicholas";
  237. //存储数据,可以让任何以.net 结尾的域名访问——不要这样做!
  238. globalStorage["net"].name = "Nicholas";
  239.  
  240. //globalStorage 的每个属性都是 Storage 的实例。因此,可以像如下代码中这样使用。
  241. globalStorage["www.wrox.com"].name = "Nicholas";
  242. globalStorage["www.wrox.com"].book = "Professional JavaScript";
  243. globalStorage["www.wrox.com"].removeItem("name");
  244. var book = globalStorage["www.wrox.com"].getItem("book");
  245.  
  246. //如果你事先不能确定域名,那么使用 location.host 作为属性名比较安全
  247. globalStorage[location.host].name = "Nicholas";
  248. var book = globalStorage[location.host].getItem("book");
  249. /*如果不使用 removeItem() 或者 delete 删除,或者用户未清除浏览器缓存,存储在globalStorage 属性中的数据会一直保留在磁盘上。
  250. 这让 globalStorage 非常适合在客户端存储文档或者长期保存用户偏好设置*/
  251.  
  252. /*localStorage对象必须来自同一个域名(子域名无效),使用同一种协议,在同一个端口上,这相当于globalStorage*/
  253.  
  254. //使用方法存储数据
  255. localStorage.setItem("name", "Nicholas");
  256. //使用属性存储数据
  257. localStorage.book = "Professional JavaScript";
  258. //使用方法读取数据
  259. var name = localStorage.getItem("name");
  260. //使用属性读取数据
  261. var book = localStorage.book;
  262.  
  263. //为了兼容只支持 globalStorage 的浏览器,可以使用以下函数。
  264. function getLocalStorage(){
  265. if (typeof localStorage == "object"){
  266. return localStorage;
  267. } else if (typeof globalStorage == "object"){
  268. return globalStorage[location.host];
  269. } else {
  270. throw new Error("Local storage not available.");
  271. }
  272. }
  273.  
  274. var storage = getLocalStorage();
  275. </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. [Swift实际操作]七、常见概念-(14)使用UIColor设置界面组件的颜色属性

    打开移动应用程序,不可避免的需要和颜色打交道.本文将为你演示颜色对象的使用. 首先导入需要使用到的界面工具框架 import UIKit 通过UIColor的属性,可以获得橙色.右侧的实时反馈区,显示 ...

  2. Spring注解大全,汇总版

    Spring使用的注解大全和解释 注解 解释 @Controller 组合注解(组合了@Component注解),应用在MVC层(控制层),DispatcherServlet会自动扫描注解了此注解的类 ...

  3. IDEA 笔记汇总

    Intellij IDEA 像eclipse那样给maven添加依赖 Intellij idea maven 引用无法搜索远程仓库的解决方案 Intellij IDEA 封装Jar包(提示错误: 找不 ...

  4. 经典DP 洛谷p1880 石子合并

    https://www.luogu.org/problemnew/show/P1880 题目 题目描述 在一个圆形操场的四周摆放N堆石子,现要将石子有次序地合并成一堆.规定每次只能选相邻的2堆合并成新 ...

  5. 【性能调优】:记录一次数据库sql语句性能调优过程

    一,依旧很简单的一个接口,查询列表接口,发现10并发单交易场景下,数据库表4w铺底数据,每次查询2000条数据进行orderby显示,平均响应时间2秒以上,数据库的cpu使用率高达95%: 二,抓到这 ...

  6. 【Vue】环境搭建、项目创建及运行

    一.软件下载 1. 进入官网https://nodejs.org/en/下周node.js,傻瓜式安装步骤(一直下一步就好) 2. 进入官网http://www.dcloud.io/下载并安装编辑器H ...

  7. Mac下开机启动rc.common不生效的问题

    经过测试在10.12.6下/etc/rc.common不生效,原因是已经被launchd守护进程所取代,虽然保留着这个文件,但是基本是不起作用的. 如果要开机启动请直接使用launchd进行操作. 同 ...

  8. scrapyd远程连接配置

    安装scrapyd: pip install scrapyd 默认scrapyd启动是通过scrapyd就可以直接启动,bind绑定的ip地址是127.0.0.1端口是:6800,这里为了其他主机可以 ...

  9. C 扩展库 - sqlite3 API

    sqlite3 API Summary sqlite3 The database connection object. Created by sqlite3_open() and destroyed ...

  10. Java SE 基础知识

    常量: 常量是一种标识符,它的值在运行期间恒定不变,并且常量在程序中只能被引用,而不能被重新赋值. 常量的命名规则: 1.在 Java 中,在变量声明中加入 final 关键字代表常量,加入 stat ...