COOKIE

本地存储：把数据存储在浏览器运行的终端上，用来保存用户数据。
localStorage、 seesionStorage
保存、获取、删除
服务器打交道(页面协议，必须是http/https(从服务器打开页面)，以file://打开的页面(从本地打开页面)，无法使用cookie)

1.cookie的保存：

document.cookie = 代保存的字符串;

  1. cookie中保存的都是字符串
  2. cookie每次保存只能存储一个cookie，如果想存储多个需要调用多次
  3. cookie保存时的字符串格式为”名字=值”
  4. cookie可以设定过期时间。其默认值为session(关闭“浏览器”就删除cookie)。当浏览器发现该cookie的过期时间已过到了，则会将该cookie从浏览器中删除
    1. document.cookie = 'username=cuijn';
    2. document.cookie = 'username=phgap;';
    3. document.cookie = 'password=123456';
    4. document.cookie = 'email=cuijn@qq.com';
    5. //在Google里Application下的Cookie便可以看到

2.cookie的获取：

document.cookie
  1. /*
  2.   取出来的cookie:username=cuijn; password=123456; email=cuijn@qq.com; mobile=13912345678; username=phgap
  3.   因为document.cookie在获取cookie时，会一股脑的将所有cookie全部取出，所以我们需要定义一个函数，
  4.   通过cookie的name来取得对应的value,此处传进来的name必须为字符串
  5. */
  7. functiongetCookie(name) {
  8. // 1. 用【; 】将cookie字符串拆分成一个数组，
  9. var cookie = decodeURIComponent(document.cookie);
  10.   //对其进行解码，预防超出范围
  11. var array = cookie.split('; ');
  12.   // ！！！！ 此处注意，从最上面取到的cookie值可以发现，存储的两个cookie值之间用【; 】[分号，空格]隔开的，一定注意有空格！
  14. // 2. 遍历数组，将每个元素用【=】拆分
  15. var name_value;
  16. for (vari = 0; i < array.length; i++) {
  17.   name_value = array[i].split('=');
  18.   if (name_value[0] === name) {
  19. // 3. 元素拆分后的[0]与参数比较，如果相等则返回[1]，否则继续找下一个元素
  20.     returnname_value[1];
  21.    }
  22. }
  23. //循环中没返回，说明没有该cookie。
  24.   return null;
  25. }
  26. alert( getCookie('username') ); 
  27. alert( getCookie('tel') );

设置cookie
  1. function setCookie(name, value, path, days) {
  2.   var str = encodeURIComponent(name) + '=' + encodeURIComponent(value);
  3.   if (path) {
  4.     str += '; path=' + path;
  5.   }
  6.   if (days) {
  7.     vard = newDate();
  8.     d.setDate(d.getDate() + days)
  9.     str += '; expires=' + d;
  10.   }
  11.   document.cookie = str;
  12. }

删除cookie
  1. function removeCookie(name, path) {
  2.   setCookie(name, '', path, -1);
  3. }

3.设定cookie的过期时间方式

  1. //Google的默认:为当前日期的负值，关闭浏览器存储的cookie即消失
  3. document.cookie = 'mobile=13912345678; expires=' + (newDate('2018-9-23'))

4.cookie的路径

  1. document.cookie = 'city=dalian; path=/DL-1806/00_src'

path: 表示cookie的有效范围。只有path指定的路径以内的html文件，才能访问这个cookie
cookie中path的默认值为：当前html所在路径

5.secure选项

该选项只有选项名，不用设定选项值。
当设定了之后，只有在发送https请求时，才会将该cookie发给服务器

7.Cookie和服务器

1.服务器可以设定浏览器的cookie
2.浏览器向服务器发送请求时，会将当前页面所能访问到的cookie全部发给服务器
服务器记录浏览器登录状态的过程(会话跟踪)：

  1. 浏览器 —-> (请求登录) 服务器
  2. 浏览器 <—- (登录成功包含了设定浏览器cookie的内容) 服务器
  3. 浏览器 —-> (发送其他请求，包含服务器刚刚设定到浏览器的cookie) 服务器 (服务器收到之后，判断这个cookie是否存在，并返回相应的内容)

实例： 在Google里登录百度账号，关闭Google，再次打开时仍在登录：
第一次请求登录成功后，在cookie里能发现多了些内容，便为服务器在浏览器终端设定了cookie（经本人对照发现多了一项Cookie值：BDUSS…..,将此行cookie删掉，刷新页面，便是未登录状态）
当浏览器再次请求服务器时，便将浏览器里的cookie全部发给了服务器，服务器发现自己设定的cookie后便在数据库中找到对应的账号数据，给予响应。

6.url编码

window.encodeURIComponent( )
url解码: window.decodeURIComponent( )
file:///C:/Users/Administrator/Desktop/%E4%B8%AD%E6%96%87.html
原文件名：file:///C:/Users/Administrator/Desktop/中文.html
url路径支持的字符是有限的，当超出这个范围，会对其进行编码。这个为url编码。
反向的过程叫做url解码

  1. console.log(window.encodeURIComponent('中文')) //%E4%B8%AD%E6%96%87
  2. console.log(window.decodeURIComponent('%E4%B8%AD%E6%96%87')) //中文