在客戶端運行的JS是不能操作用戶電腦磁盤中的文件的(保護客戶端運行的安全)

JS中的本地存儲:

使用JS向瀏覽器的某一個位置中存儲一些內(nèi)容,瀏覽器即使關(guān)閉了,存儲的信息也不會銷毀,當(dāng)在重新打開瀏覽器的時候我們依然可以獲取到上一次存儲的信息

1.本地存儲的方案:

傳統(tǒng):

• cookie:把信息存儲到客戶端的瀏覽器中(但是項目服務(wù)器端也是可以獲取COOKIE的)
• session:把信息存儲到服務(wù)器上的(服務(wù)器存儲)

HTML5:webStorage

• localStorage:永久存儲到客戶端的本地
• sessionStorage:信息的會話存儲,會話窗口存在信息也存在,會話窗口關(guān)閉信息就消失了

2、cookie localStorage sessionStorage

• webStorage
  setItem([key],[value]):向客戶端的本地存儲一條記錄;存儲的[value]需要是字符串格式的,如果編寫的不是字符串,瀏覽器也會默認(rèn)轉(zhuǎn)化為字符串然后在進行存儲;同源下存儲的[key]是不會重復(fù)的,如果之前有的話,是把存儲的信息值重修的進行修改;
  getItem([key]):獲取之前存儲的值
  removeItem([key]):移除KEY對應(yīng)的存儲記錄
  clear():把當(dāng)前源下所有的存儲記錄都移除掉
  localStorage.length:獲取存儲的記錄條數(shù)
  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的區(qū)別:

• localStorage屬于永久存儲到本地,不管是刷新頁面還是關(guān)掉頁面或者是關(guān)掉瀏覽器,存儲的內(nèi)容都不會消失,只有我們自己手動的去刪除才會消失(不是殺毒軟件還是瀏覽器自帶的清除歷史記錄功能都不能把localStorage存儲的內(nèi)容移除掉)
• sessionStorage屬于臨時的會話存儲,只要當(dāng)前的頁面不關(guān)閉,信息就可以存儲下來,但是頁面一但關(guān)閉,存儲的信息就會自動清除(F5刷新頁面只是把當(dāng)前的DOM結(jié)構(gòu)等進行重新的渲染,會話并沒有關(guān)閉)

cookie

cookieRender

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

cookie 和 localStorage的區(qū)別:

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

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

• cookie:
  記住用戶名密碼或者是自動登錄；用戶的部分信息,當(dāng)用戶登錄成功后我們會把用戶的一些信息記錄到本地cookie中,這樣在項目中的任何頁面都可以知道當(dāng)前登錄的用戶是哪一個了；購物車...(存儲少量信息或者是需要瀏覽器兼容的都需要使用cookie來進行存儲)

• localStorage:
  在PC端我們可以用其存儲 某一個JS或者CSS中的源代碼；還可以把一些不需要經(jīng)常更新的數(shù)據(jù)存儲到本地，存儲的時候可以設(shè)置一個存儲的時間，以后重新刷新頁面，看一下時間有沒有超過預(yù)定的時間，如果已經(jīng)超過了，我們從新獲取最新數(shù)據(jù)，沒超過我們使用本地數(shù)據(jù)；

本地存儲都是明文存儲

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

• 可逆轉(zhuǎn)加密:加密完成還可以解密回來
• 不可逆轉(zhuǎn)加密:MD5

escape && unescape

escape && unescape 可以對中文的字符串進行編碼和解碼,防止傳遞存儲過程中出現(xiàn)亂碼，除此之外可以使用的還有很多很多：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 () {
    //->設(shè)置
    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
    }
})();