JS_浅析浏览器存储

JavaScript是运行在客户端的脚本，因此一般是不能够设置Session的，因为Session是运行在服务器端的。

而cookie是运行在客户端的，所以可以用JS来设置cookie.

1.cookie简介

cookie是以键值对的形式保存的，即key=value的格式。各个cookie之间一般是以“;”分隔。

1. cookie的容量: 4KB
2. cookie存储的数据类型: 字符串
3. cookie是浏览器中的纯文本 => 一个txt文件;
4. cookie有访问权限限制; =>同源策略 ; 同端口，同协议，同域名;
5. cookie存放以域名形式区分的。一个域名下存放的cookie的个数是有限制的，不同浏览器存放的个数不一样，cookie能存储的条目数为:50条。
6. 如果想长时间存放一个cookie，同时需要设置一个过期时间Cookie默认是临时存储的，当浏览器关闭时，自动销毁。
7. cookie存在于协议之中，html文件直接在浏览器中预览看不到cookie，需要将路径改为localhost

• cookie的缺点

1. cookie可能被禁用。

   当用户非常注重个人隐私保护时，他很可能禁用浏览器的cookie功能；

2. cookie是与浏览器相关的。

   这意味着即使访问的是同一个页面，不同浏览器之间所保存的cookie也是不能互相访问的；

3. cookie可能被删除。

   因为每个cookie都是硬盘上的一个文件，因此很有可能被用户删除；

4. cookie安全性不够高。

   所有的cookie都是以纯文本的形式记录于文件中，因此如果要保存用户名密码等信息时，最好事先经过加密处理

• 检查元素打开cookie

浏览器中右键，检查元素 => Storage => Cookies =>点击网址

• 控制台获取cookie

document.cookie

• domain

1. 域表示cookie的可访问性 ；

2. 设置的 localhost 和 127.0.0.1 之间可以互通;

3. 两个不同的设置之间,需要用 ";" 进行间隔;

   eg : document.cookie = "key=value;domain=127.0.0.1";

• expirse

设置cookie的过期时间，默认生存期限就到关闭浏览器为止

• 设置一条两天后过期的cookie

var date = new Date();
date.setDate(date.getDate() + 2);
document.cookie = "name=xiaoming;expires=" + date.toUTCString();

• 删除cookie的方式

1. 没有显式设置cookie过期时间：

   如果没有显示设置cooke过期时间，cookie不会存入本地硬盘，仅存留于内存中。

   当我们关闭浏览器的时候，cookie会自动删除，生命周期无需我们操控。

2. 显式设置cookie过期时间：

   更多的时候，cookie的生命周期可能需要人为的设置，以达到某些需求。

   比如用户名与密码保存一天、一周或者一月等设置，通过Expires属性即可实现。

   当当前时间日期超过Expires属性值时，cookie就会被自动删除。

//将cookie的过期时间设置为-1

function removeCookie( key , path){
      cookie(key,null, {
            expires : -1,
            path : path ? path : ""
      })
}     

• cookie路径

1. 可访问空间; 最大的访问作用域; 默认情况下访问作用域是在当前文件夹及之下的所有文件夹;
2. 设置为 / 则表示在根目录可以访问; 如果有特殊设置写明文件夹路径即可;
3. 如果cookie的path不同我们则认为这是两条不同的cookie;
4. 父级只能访问父级的cookie；子级可以访问父级和子级的cookie。

• 封装设置cookie的方法

let obj = {
    username: "xiaoming",
    password: "123456",
    age: "18"
}

function setCookie(obj, time) {
    let d = new Date();
    d.setDate(d.getDate() + time);
    for (let attr in obj) {
        document.cookie = `${attr}=${obj[attr]};expires=${d.toUTCString()}`
    }
}

setCookie(obj, 5);

• 设置单个cookie时

Cookie.set = function(key,value,options){
    var d = new Date();
    d.setHours(d.getHours() + options.expires);
    document.cookie = `${value};path=${options.path||'/'};expires=${d}`
}

• 封装获取cookie方法

function getCookie() {
    let obj = {};
    //系统打印出来的cookie字符串之间存在空格
    let arr = document.cookie.split(";")

    //去掉字符串开头和结尾的空格
    arr.forEach(item => {
        obj[item.split("=")[0].trim()] = item.split("=")[1].trim();
    })
    return obj;
}
console.log(getCookie());

• 上面的getCookie()方法，可以替换为

function getCookie(){
    let obj = {};
    let arr = document.cookie.split("; ");
    //注意：split的参数后面的空格

    arr.forEach(item => {
         obj[item.split("=")[0]]=item.split("=")[1];
    })
    return obj;
}

• cookie的设置与获取

function cookie(key, value, options) {
    
//判断长度为1时，说明只有key,返回key对应的value;
if (arguments.length === 1) {
      var arr = document.cookie.split("; ");
      var res = "";
      arr.some(function(item) {
            item = item.split("=");
            return res = item[0] === key ? item[1] : "";
      })
      return res;
}
typeof options !== "object" ? options = {} : "";
if (options.expires) var d = new Date();
return document.cookie = [
      key + "=" + value + ";",
      options.domain ? "domain=" + options.domain + ";" : "",
      options.path ? "path=" + options.path + ";" : "",
    //  (d.setDate(d.getDate() + options.expires)返回的是毫秒数，&& d 之后返回的是对象
      options.expires ? "expires=" + (d.setDate(d.getDate() + options.expires) && d) +      ";" : "",
    ].join("");
}

cookie("key", "value");

2.sessionStorage和localStorage

sessionStorage会话存储，用于本地存储一个会话 （session）中的数据，这些数据当在关闭浏览器后数据也随之销毁。

localStorage 和 sessionStorage都是window对象的属性

• localStorageAPI

• locatStorage转换存储

var obj = {
    a: 1,
    b: 2,
    c: 3
}
localStorage.obj = JSON.stringify(obj);

console.log(JSON.parse(localStorage.obj));

3. cookie、sessionStorage和localStorage区别