23-存储会话：cookie、WebStorage和indxDB
存储会话的两种途径：Cookie和Web Storage。
存储会话是什么意思呢？毕竟机器它们又不能真的讲话。所以，我就把存储会话理解为存储用户的信息，比如说用户名和密码，用户一旦输入过后，浏览器就能自己记住这些信息，不用再去记录了。
一、将数据存储在客户端上——cookie
该标准要求，服务器对请求发送Set-Cookie HTTP头，作为响应的一部分。
Set-Cookie头包括name、value。名称和值在传送过程中是以URL编码的。
1、限制
2、cookie的构成
名称：不区分大小写，经过url编码。
值：字符串，经过url编码的。
3、JS中的cookie
一个接口和一个方法，document.cookie和decodeURIComponent（）。
该方法是解码用的。
最好每次设置cookie时都要使用encodeURIComponent()编码。
document.cookie=encodeURIComponent("name")+"="+encodeURIComponent("Alice");
document.cookie=encodeURIComponent("name")+"="+encodeURIComponent("Tony")+";domain=.wrox.com";
要给创建的cookie指定额外信息，就要将参数追加到这个字符串上。以分号加一个空格“； ”分割。
JS对cookie的获取是通过document.cookie这个接口来取得的。写一个对象，里面包含各种方法可以简化cookie的读取、写入和删除。
var CookieUtil={ //获取cookie get:function(name){ //得到的是经过编码的值 var cookieName=encodeURIComponent(name)+"="; var cookieStart=document.cookie.indexOf(cookieName); var cookieValue=null; if (cookieStart>-1){ //cookie存在 var cookieEnd=document.cookie.indexOf(";",cookieStart); if(cookieEnd==-1){ cookieEnd=document.cookie.length; } cookieValue=decodeURIComponent(document.cookie.substring(cookieStart+cookieName.length,cookieEnd)) } return cookieValue; }, //创建cookie set:function(name,value,expires,path,domain,secure){ var cookieTxt=decodeURIComponent(name)+"="+decodeURIComponent(value); //过期时间 if(expires instanceof Date){ cookieTxt=cookieTxt+"; expires="+expires.toGMTString(); } if(path){ cookieTxt=`${cookieTxt}; path=${path}`; } if(domain){ cookieTxt=`${cookieTxt}; domain=${domain}`; } if(secure){ //secure非键值对，是一个secure的字符串 cookieTxt=`${cookieTxt}; ${secure}`; } // console.log(cookieTxt); document.cookie=cookieTxt; }, };
有了上面的添加cookie和删除cookie的方法，就可以使用了。我写了这样一段代码：
var date=new Date(); CookieUtil.set("book","love U!",date); console.log('浏览器中的cookie',document.cookie); var getInfo=CookieUtil.get("book") console.log('获得cookie',getInfo);
在node环境中运行，发现控制台给我报了一个错误：
document is not defined
为什么呢？document不是window的对象吗？js文件默认的对象是window，所以省略不写也没有问题啊？我不明白，于是在document前加了window，但还是同样的错误。于是找了网上的回答。
渣英语翻译一下：document是一个浏览器的dom对象，而node.js只是一个服务器，并不是js的浏览器，因此你不能用它获取浏览器的dom。
所以我就把这段代码复制到浏览器的控制台上，发现set成功了，第一个cookie是就是set后的结果，但是get还是get不到啊。
然后我就发现是我最上面的那个代码写错了，decode是解码，encode是编码啊。我两个给弄混了。
4、global对象的URI编码方法
URI：Uniform Resource Identifiers，通用资源标识符。
而encodeURI、decodeURI、encodeURIComponent、decodeURIComponent这四个方法，只是对URI进行编码，以便发送给浏览器。他们用特殊的UTF-8编码来替换所有无效的字符，从而让浏览器理解和接受。
-
为了理解encodeURI、decodeURI、encodeURIComponent、decodeURIComponent四个方法到底是什么，通过代码输出一下：
var str1=encodeURI("happy"); console.log(str1);//happy var str2=encodeURIComponent("sad"); console.log(str2);//sad var str3=decodeURI("angry"); console.log(str3);//angry var str4=decodeURIComponent("cry"); console.log(str4);//cry console.log(encodeURIComponent("http://www.w3school.com.cn"))//http%3A%2F%2Fwww.w3school.com.cn console.log(encodeURIComponent("http://www.w3school.com.cn/p 1/"))//http%3A%2F%2Fwww.w3school.com.cn%2Fp%201%2F console.log(encodeURIComponent(",/?:@&=+$#"))//%2C%2F%3F%3A%40%26%3D%2B%24%23 console.log(encodeURI("http://www.w3school.com.cn"))//http://www.w3school.com.cn console.log(encodeURI("http://www.w3school.com.cn/p 1/"))//http://www.w3school.com.cn/p%201/ console.log(encodeURI(",/?:@&=+$#"))//,/?:@&=+$#
先来看一下encodeURIComponent和encodeURI。
encodeURI是不会对属于自己的URI特殊符号进行编码。例如冒号、正斜杠、问号和井字号。
而encodeURIComponent是对整个地址中所有不符合规则的路径进行编码，即会对它发现的任何非标准字符进行编码。
在cookie中，一般用encodeURIComponent进行编码。
二、Web存储机制
Web存储机制目的是：
（1）为了克服cookie的限制，它的数据存在客户端上，不用发送给服务器。但浏览器关闭的时候，存储的信息就消失了。
（2）提供一种存储大量可以跨会话存在的数据机制
Web存储机制包括两种对象：sessionStorage和globalStorage。这两个对象在浏览器中是以window对象属性的形式存在的。
还记得在事件对象里面，IE浏览器的事件event 是作为window的属性存在的。现在，浏览器的window属性又多了两个。
Storage类型包含的方法有5种：
（1）clear()： 删除所有值
（2）getItem(name)： 根据name获取对应的值。
（3）setItem(name, value)： 根据name设置对应的值。
（4）removeItem（name）： 删除name对应的值。
（5）key(index)：获得index位置处值的名字。
sessionStorage是Storage的一个实例，所以可以使用Storage的各种方法，比如setItem方法。这些数据在浏览器关闭之后就会消失，但是跨页面刷新仍然存在。
sessionStorage.setItem("name","Alice"); //使用方法来存值，建议用这种
sessionStorage.book="如何学好JS"; //使用属性来存值，不建议使用
2、globalStorage空间的访问
他把信息存储在了电脑磁盘上。要想获取这些数据，必须先指定哪些域可以访问该数据。他是根据发起请求页面的域名、协议、端口来限制的。类似于ajax的同源策略。
如果用户长期未清理浏览器缓存，存储在globlastorage属性中的数据会一直保留。
3、localStorage
localStorage取代了globalStorage，不需要给localStorage指定任何访问规则，规则早就设置好了。
localStorage也是Storage的一个实例，也可以使用Storage的五种方法，就像sessionStorage一样。
localStorage.setItem('name', 'Alice'); //使用方法进行存取值，建议使用
localStorage.getItem('name');
localStorage.age = 18; //使用属性进行存取值，不建议使用
var age = localStorage.age;
三、IndexDB
indexDB是一个数据库，它的特点在于保存内容的时候，不是以表格的形式，而是以对象集合的形式。
1、数据库
使用indexDB的第一步，就是open()。如果数据库已存在，就会打开；如果不存在，就会创建并打开。
indexDB.open()会返回一个IDBRequest对象。在这个对象上，使用onerror和onsuccess事件处理程序。
var indexDB=window.indexedDB; function checkAll(){ var database; var request=indexDB.open("admin"); request.onerror=function(event){ console.log(event.target.errorCode); }; request.onsuccess=function(event){ database=event.target.result; }; }
看上面这段代码，分析一下。
首先打开的IDBRequest对象，赋给了request变量。而这个request变量，事件上就是事件中的属性target，所以，request其实就等于event.target。
而request这个对象中，存在的result属性，是一个数据库的实例对象。我们把这个对象赋给了database变量。
2、对象存储空间（增）
有了数据库，就要往数据库里增加和删除信息了。
在创建对象存储空间之前，首先要先清楚，你想要的保存什么数据类型。
取对象里面的某一个属性，作为对象存储空间的键。这个属性必须全局唯一，而我们就是通过这个键来访问数据。他是必需项。
var user={ username:"007", firstName:"Wang", lastName:"Huahua", password:"123" } var store=db.createObjectStore("users",{keypath:"username"});
分析上面这段代码，假设我们要记录的一个对象格式，是user这样的格式。取user对象里面的username作为键，创建一个对象存储空间。
createObjectStore里的第一个参数，是这个空间的名字，第二个参数，就是键了。
使用add()和put()方法，用来向这个空间添加数据。
var user1={ username:"007", firstName:"Wang", lastName:"Huahua", password:"123" }, var user2={ username:"007", firstName:"Wang", lastName:"Huahua", password:"123" } var store=db.createObjectStore("users",{keypath:"username"}); var users=[user1,user2] var i=0; while(i<users.length){ store.add(users[i++]); }
add与put的区别是：如果存在同名对象，add会报错，put会覆盖。
3、事务（改、查）
transaction()方法，创建事务。
