聊聊前端的本地儲存

什麼是本地儲存

• 本地儲存就是把一些資訊儲存在當前瀏覽器的指定域下的某個地方（儲存到某一個物理硬碟中）

本地儲存的特點：

• 1、不能跨瀏覽器傳輸：在谷歌瀏覽器中儲存的資訊，在IE瀏覽器中無法獲取，因為本地儲存是存在當前瀏覽器中的某個具體位置的
• 2、不能跨域傳輸：在京東域下儲存的資訊，在淘寶域下不能獲取到（也是為了保證資訊的安全性）
• 3、本地儲存並不安全，有一些大神們可以找到每個瀏覽器儲存資訊的位置，然後把資訊進行解碼編譯，導致客戶端一些儲存的資訊洩露 ...

前端本地儲存的常用方式：cookie、localStorage、sessionStorage

伺服器端儲存方式：把資訊儲存在指定的伺服器中（真實專案中大部分都是基於伺服器進行儲存的）

細說cookie：

• 1、相容性：相容所有的瀏覽器
• 2、cookie有過期時間（我們可以自己設定，一般都不會設定很長），要是不設定過期時間，cookie就會在瀏覽器關閉之後隨之關閉
• 3、cookie會在伺服器和瀏覽器之間來回傳送（本地檔案不能測試cookie）。而且cookie資料始終在同源的http請求中攜帶（即使不需要），這也是Cookie不能太大的重要原因。正統的cookie分發是通過擴充套件HTTP協議來實現的，伺服器通過在HTTP的響應頭中加上一行特殊的指示以提示瀏覽器按照指示生成相應的cookie。
• 4、cookie不是很安全，別人可以分析存放在本地的cookie並進行cookie欺騙，考慮到安全應當使用session，重要的資訊不建議在本地進行儲存（例如：使用者名稱、密碼、手機等），如果非要儲存，一定要做好加密工作

細說localStorage（本地永久儲存）

• 1、沒有過期時間，只要不手動設定過期時間，就會永遠儲存在本地
• 2、所有低版本的瀏覽器都不相容
• 3、localStorage允許一個域下最多可以儲存5MB左右的內容
• 4、是完全的本地儲存，和伺服器沒有半毛錢的關係，
• 5、localStorage的缺點：
  • ① localStorage大小限制在500萬字元左右，各個瀏覽器不一致
  • ② localStorage在隱私模式下不可讀取
  • ③ localStorage本質是在讀寫檔案，資料多的話會比較卡（firefox會一次性將資料匯入記憶體，想想就覺得嚇人啊）
  • ④ localStorage不能被爬蟲爬取，不要用它完全取代URL傳參

 <!--使用方法儲存資料-->
localStorage.setItem('name', 'Nicholoas');
 <!--使用屬性儲存資料-->
localStorage.book = 'Pro JS';
<!--使用方法讀取資料-->
var name = localStorage.getItem('name');
 <!--使用屬性讀取資料-->
var book = localStorage.book;
複製程式碼

sessionStorage

• sessionStroage：本地會話儲存，當前頁面關閉，代表著會話結束，會把儲存的資訊自動清除（重新整理頁面不會清除）

localStorage和sessionStorage：

• 他們都是H5中新增加的API（不相容低版本瀏覽器，常應用於移動端開發）
• 他們的共同方法：
  • setItem([key],[value])：通過鍵值對的方式把資訊儲存在客戶端本地（儲存在本地的資訊值都是字串格式的）
  • getItem([key])：獲取本地儲存資訊中指定屬性名的屬性值
  • removeItem([key])：把本地儲存資訊中指定屬性名的資訊刪除掉
  • clear()：把本地儲存的資訊都刪除掉（清空：只能清空當前瀏覽器自己域下的資訊）
  • key([index])：本次儲存的資訊是有一定順序的（一般都是按照儲存的先後順序），我們可以把所有儲存的資訊理解為一個資訊集合，key就是通過索引獲取這個集合中指定位置的屬性名資訊的

cookie的用法：

<!--COOKIE-->
let  cookie = (function() {
    letsetValue = (name, value, expires = (newDate(newDate().getTime()+ (1000* 60* 60* 24))), path= '/', domain= '')=>{
        document.cookie = `${name}=${escape(value)};expires=${expires.toGMTString()};path=${path};domain=${domain}`;
    };

    letgetValue = name=>{
        letcookieInfo = document.cookie,
            reg = newRegExp(`(?:^| )${name}=([^;]*)(?:;|$)`),
            ary = cookieInfo.match(reg);
        returnary ? unescape(ary[1]) : null;
    };

    letremoveValue = (name, path = '/', domain = '')=>{
        letvalue = getValue(name);
        if(value) {
            document.cookie = `${name}= ;path=${path};domain=${domain};expires=Fri,02-Jan-1970 00:00:00 GMT`;
        }
    };

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

複製程式碼

使用360等安全衛士清理垃圾的時候，或者使用瀏覽器自帶的清理工具的時候，都極有可能會把本地儲存的cookie都幹掉，但是目前是幹不掉localStorage儲存的資訊的

在專案當中的用法：真實專案中PC端開發，如果需要儲存的資訊比較重要（例如：登入資訊、購物車資訊等），需要相容的，只能用cookie，其餘不需要考慮相容的，根據需求自己選擇即可