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存储有两个标准: ...
随机推荐
- [Swift实际操作]七、常见概念-(14)使用UIColor设置界面组件的颜色属性
打开移动应用程序,不可避免的需要和颜色打交道.本文将为你演示颜色对象的使用. 首先导入需要使用到的界面工具框架 import UIKit 通过UIColor的属性,可以获得橙色.右侧的实时反馈区,显示 ...
- Spring注解大全,汇总版
Spring使用的注解大全和解释 注解 解释 @Controller 组合注解(组合了@Component注解),应用在MVC层(控制层),DispatcherServlet会自动扫描注解了此注解的类 ...
- IDEA 笔记汇总
Intellij IDEA 像eclipse那样给maven添加依赖 Intellij idea maven 引用无法搜索远程仓库的解决方案 Intellij IDEA 封装Jar包(提示错误: 找不 ...
- 经典DP 洛谷p1880 石子合并
https://www.luogu.org/problemnew/show/P1880 题目 题目描述 在一个圆形操场的四周摆放N堆石子,现要将石子有次序地合并成一堆.规定每次只能选相邻的2堆合并成新 ...
- 【性能调优】:记录一次数据库sql语句性能调优过程
一,依旧很简单的一个接口,查询列表接口,发现10并发单交易场景下,数据库表4w铺底数据,每次查询2000条数据进行orderby显示,平均响应时间2秒以上,数据库的cpu使用率高达95%: 二,抓到这 ...
- 【Vue】环境搭建、项目创建及运行
一.软件下载 1. 进入官网https://nodejs.org/en/下周node.js,傻瓜式安装步骤(一直下一步就好) 2. 进入官网http://www.dcloud.io/下载并安装编辑器H ...
- Mac下开机启动rc.common不生效的问题
经过测试在10.12.6下/etc/rc.common不生效,原因是已经被launchd守护进程所取代,虽然保留着这个文件,但是基本是不起作用的. 如果要开机启动请直接使用launchd进行操作. 同 ...
- scrapyd远程连接配置
安装scrapyd: pip install scrapyd 默认scrapyd启动是通过scrapyd就可以直接启动,bind绑定的ip地址是127.0.0.1端口是:6800,这里为了其他主机可以 ...
- C 扩展库 - sqlite3 API
sqlite3 API Summary sqlite3 The database connection object. Created by sqlite3_open() and destroyed ...
- Java SE 基础知识
常量: 常量是一种标识符,它的值在运行期间恒定不变,并且常量在程序中只能被引用,而不能被重新赋值. 常量的命名规则: 1.在 Java 中,在变量声明中加入 final 关键字代表常量,加入 stat ...