cookie，localstorage和sessionstorage

• cookie的概念

  cookie又叫會話跟蹤技術是由Web服務器保存在用戶瀏覽器上的小文本文件，它可以包含相關用戶的信息。無論何時用戶鏈接到服務器，Web站點都可以訪問Cookie信息。比如：自動登錄、記住用戶名，記住一些和用戶相關的信息等

• cookie的特點

  -禁用cookie後，無法正常註冊登陸；
  -cookie是與瀏覽器相關的，不同瀏覽器之間所保存的cookie也是不能互相訪問的；
  -cookie可以被刪除。因爲每個cookie都是硬盤上的一個文件；
  -cookie安全性不夠高-xss攻擊

• cookie的使用

  -cookie的添加-
  鍵值對，自定義鍵名，值一定是字符串
  
  存儲數組和對象：
  帶有過期時間的cookie：
  
  -cookie的獲取-
  如果cookie不存在，輸出undefined；
  封裝cookie，實現傳入key，輸出value ，已存入：me=張三; age=100; sex=男， 每一項繼續進行轉數組name=張三，age=100，sex=男
  第一次 newarr = [name,張三]
  第二次 newarr = [age,100]
  第三次 newarr = [sex,男]
  let newarr = arr[i].split(’=’);
  newarr[0]
  傳入的值和數組的第一項(key)進行比較，滿足條件輸出newarr[1]的value。

cookie封裝：

    let cookie = {
        set: function(name, value, days) {
            let d = new Date();
            d.setDate(d.getDate() + days)
            document.cookie = `${name}=${encodeURIComponent(value)};expires=${d};path=/`;
        },
        get: function(name) {
            var arr = document.cookie.split('; ');
            var newarr = [];
            for (let i = 0; i < arr.length; i++) {
                newarr[i] = arr[i].split('=');
            }
            for (let value of newarr) {
                if (name == value[0]) {
                    console.log(decodeURIComponent(value[1]));
                }
            }
        },
        unset: function(name) {
            this.set(name, '', -1)
        }
    }

    cookie.set('姓名', '張三',10);
    cookie.set('xingbie', 'xhahahha', 10);
    cookie.get('姓名');//'張三'

• cookie,locastorage,sessionstorage區別

  locastorage,sessionstorage html5新增的;
  localStorage拓展了cookie的4K限制，永久存儲，除非手動刪除;
  cookie可以自由設定過期時間;
  cookie需要服務器。

  -localstorage的特點-

  1、localStorage拓展了cookie的4K限制，永久存儲，除非手動刪除。
  2、localStorage會將第一次請求的數據直接存儲到本地，這個相當於一個5M大小的針對於前端頁面的數據庫，但只有在高版本的瀏覽器中才支持的。
  3、目前所有的瀏覽器中都會把localStorage的值類型限定爲string類型，這個在對我們日常比較常見的JSON對象類型需要一些轉換。
  4、localStorage本質上是對字符串的讀取，如果存儲內容多的話會消耗內存空間，會導致頁面變卡。
  5、不同的瀏覽器本地存儲不能相互進行訪問。
  6、sessionstorage會話結束就消失。

		**localStorage存儲：**
        //點操作符存儲
        window.localStorage.name = 'zhangsan';
        //中括號方式存儲[]
        window.localStorage['age'] = 100;
        //利用內置的方法存儲
        window.localStorage.setItem('sex', '男');
        存儲對象
        let obj = {
            a: 1,
            b: 2,
            c: 3
        }
        localStorage.setItem('objdata', JSON.stringify(obj));

        **localStorage獲取**
        console.log(localStorage.name);
        console.log(localStorage['age']);
        console.log(localStorage.getItem('objdata'));
        console.log(JSON.parse(localStorage.getItem('objdata')));//eval()


        **localStorage刪除**
        localStorage.removeItem('name');
        localStorage.clear();//刪除所有

        **sessionStorage:會話結束**//sessionStorage屬於當會話結束的時候，存儲的值會被清空
        sessionStorage.setItem('a', 10000);