本地儲存

在客戶端執行的JS是不能操作使用者電腦磁碟中的檔案的(保護客戶端執行的安全)

JS中的本地儲存:

使用JS向瀏覽器的某一個位置中儲存一些內容,瀏覽器即使關閉了,儲存的資訊也不會銷燬,當在重新開啟瀏覽器的時候我們依然可以獲取到上一次儲存的資訊

1.本地儲存的方案:

傳統:

• cookie:把資訊儲存到客戶端的瀏覽器中(但是專案伺服器端也是可以獲取COOKIE的)
• session:把資訊儲存到伺服器上的(伺服器儲存)

HTML5:webStorage

• localStorage:永久儲存到客戶端的本地
• sessionStorage:資訊的會話儲存,會話視窗存在資訊也存在,會話視窗關閉資訊就消失了

2、cookie localStorage sessionStorage

• webStorage
  setItem([key],[value]):向客戶端的本地儲存一條記錄;儲存的[value]需要是字串格式的,如果編寫的不是字串,瀏覽器也會預設轉化為字串然後在進行儲存;同源下儲存的[key]是不會重複的,如果之前有的話,是把儲存的資訊值重修的進行修改;
  getItem([key]):獲取之前儲存的值
  removeItem([key]):移除KEY對應的儲存記錄
  clear():把當前源下所有的儲存記錄都移除掉
  localStorage.length:獲取儲存的記錄條數
  localStorage.key(0):獲取索引為0這一項的KEY是什麼

localStorage.setItem('age', JSON.stringify({"jianshu": "簡書"}));
console.log(localStorage.getItem('age'));->'{"jianshu":"簡書"}'`
localStorage.removeItem('age');`
localStorage.clear();
console.log(localStorage.length);->1
console.log(localStorage.key(0));->'age'

localStorage和sessionStorage的區別:

• localStorage屬於永久儲存到本地,不管是重新整理頁面還是關掉頁面或者是關掉瀏覽器,儲存的內容都不會消失,只有我們自己手動的去刪除才會消失(不是防毒軟體還是瀏覽器自帶的清除歷史記錄功能都不能把localStorage儲存的內容移除掉)
• sessionStorage屬於臨時的會話儲存,只要當前的頁面不關閉,資訊就可以儲存下來,但是頁面一但關閉,儲存的資訊就會自動清除(F5重新整理頁面只是把當前的DOM結構等進行重新的渲染,會話並沒有關閉)

cookie

cookieRender

 cookieRender.set({
    name: 'age',
    value: 1
  });
 console.log(cookieRender.get('age'));

cookie 和 localStorage的區別:

• cookie相容所有的瀏覽器,但是localStorage不相容IE6~8
• cookie儲存內容的大小是由限制的,一般同源下只能儲存4KB的內容;
• localStorage儲存的內容也有大小限制,一般同源下只能儲存5MB;
• cookie儲存的內容是有過期時間的,而localStorage是永久儲存到本地,使用防毒軟體或者瀏覽器自帶的清除垃圾的功能都可能會把儲存的cookie給刪除掉
• 使用者可能出於安全的角度禁用cookie(無痕瀏覽器)，但是不能禁止localStorage。

真實專案中的本地儲存都使用哪些東西?

• cookie:
  記住使用者名稱密碼或者是自動登入；使用者的部分資訊,當使用者登入成功後我們會把使用者的一些資訊記錄到本地cookie中,這樣在專案中的任何頁面都可以知道當前登入的使用者是哪一個了；購物車...(儲存少量資訊或者是需要瀏覽器相容的都需要使用cookie來進行儲存)

• localStorage:
  在PC端我們可以用其儲存 某一個JS或者CSS中的原始碼；還可以把一些不需要經常更新的資料儲存到本地，儲存的時候可以設定一個儲存的時間，以後重新重新整理頁面，看一下時間有沒有超過預定的時間，如果已經超過了，我們從新獲取最新資料，沒超過我們使用本地資料；

本地儲存都是明文儲存

對於重要的資訊我們一般不要儲存到本地，如果非要儲存的話我們需要把儲存的資訊進行加密

• 可逆轉加密:加密完成還可以解密回來
• 不可逆轉加密:MD5

escape && unescape

escape && unescape 可以對中文的字串進行編碼和解碼,防止傳遞儲存過程中出現亂碼，除此之外可以使用的還有很多很多：encodeURI() decodeURI() encodeURIComponent() decodeURIComponent() ...

var str = "簡書";
var n = escape(str);
console.log(n) ->"%u7B80%u4E66"
var m = unescape(n);
console.log(m); ->簡書

cookieRender

var cookieRender = (function () {
    //->設定
    function setValue(options) {
        var _default = {
            name: null,
            value: null,
            expires: new Date(new Date().getTime() + (1000 * 60 * 60 * 24)),
            path: '/',
            domain: ''
        };
        for (var key in options) {
            if (options.hasOwnProperty(key)) {
                _default[key] = options[key];
            }
        }
        document.cookie = _default.name + "=" + escape(_default.value) + ";expires=" + _default.expires.toGMTString() + ";path=" + _default.path + ";domain=" + _default.domain;
    }

    //->獲取
    function getValue(name) {
        var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
        if (arr != null) {
            return unescape(arr[2]);
        }
        return null;
    }

    //->刪除
    function removeValue(options) {
        var _default = {
            name: null,
            path: '/',
            domain: ''
        };
        for (var key in options) {
            if (options.hasOwnProperty(key)) {
                _default[key] = options[key];
            }
        }
        if (getValue(_default.name)) {
            document.cookie = _default.name + "= ;path=" + _default.path + ";domain=" + _default.domain + ";expires=Fri,02-Jan-1970 00:00:00 GMT";
        }
    }

    return {
        set: setValue,
        get: getValue,
        remove: removeValue
    }
})();