[聊一聊系列]聊一聊前端存儲那些事兒

時間  2019-11-06
標籤 系列 前端 存儲 那些 事兒 简体版
原文   原文鏈接

歡迎你們收看聊一聊系列，這一套系列文章，能夠幫助前端工程師們瞭解前端的方方面面（不只僅是代碼）：https://segmentfault.com/blog/frontenddriverhtml

在web開發愈來愈複雜的今天，前端擁有的能力也愈來愈多。其中最重要的一項莫過於web存儲。開發者們若是使用得當，這些存儲能夠幫助咱們提高網頁的性能與靈活度。本文不講個中的細節，只講各類前端存儲的利弊，與各種存儲的應用場景。畢竟這些技術的細節在網上隨處可見，若是讀者你決定使用的話，再去細查也不遲。咱們前端人手裏都有哪些存儲武器，都用在什麼地方，請讀者隨我一一聊開去......前端

1 老朋友cookie

1.1 是什麼？

cookie是什麼就用不着我多說了吧，但是有同窗會問了，這也算存儲？固然算，它也能夠存東西不是，並且它會在用戶訪問服務器的時候被帶上。可是，筆者在這裏建議，不要使用過量，由於cookie在每次請求的時候都會被帶上。你總不想每次訪問本身網站接口或者文件的時候都帶上一堆可能用不到的信息把？這樣會增大請求包的大小。android

1.2 訪問限制性

衆所周知，cookie能夠設置訪問域。即，若是你設置cookie的時候，設定了cookie的訪問域名爲一個頂級域名，則能夠達到幾個子域名共享cookie的效果。如：騰訊網與微信網頁版共享了pac_uid(如圖1.3.1與圖1.3.2)。ios

clipboard.png
圖1.2.1web

clipboard.png
圖1.2.2sql

訪問的限制在種下cookie的時候指定。因此，咱們能夠設定cookie的訪問域名限制(固然，不能跨域啦)。
有些重要信息，如用戶的惟一標識，建議給這些cookie字段加上HttpOnly標識。加上了這個標識的話，咱們的客戶端js是沒法讀到與寫入加了標識的cookie字段的，這樣很是安全。若是有不瞭解的讀者，建議百度一下"cookie httpOnly"。數據庫

1.3 存儲時長

若是設定了cookie的超時時間的話，那麼cookie將在到期的時候失效。若是沒有設定，那麼cookie就是session級別的啦。這裏請讀者們注意一下。cookie的session含義與咱們接下來要講的sessionStorage的session含義有區別。cookie的session是，在未關閉瀏覽器的狀況下，全部的tab級別的頁面或新開，或刷新，均屬於一個session，好比，咱們打開www.qq.com，在其中種下。test=doctorhou，如圖1.3.1segmentfault

document.cookie = 'test=doctorhou';

clipboard.png
圖1.3.1跨域

咱們再刷新一下當前頁面，發現cookie還在，如圖1.4.2瀏覽器

clipboard.png
圖1.3.2

關閉種cookie的tab，咱們再新開一個tab，發現cookie仍是存在的，如圖1.4.3

clipboard.png
圖1.3.3

退出瀏覽器，再打開www.qq.com發現test=doctorhou這一項cookie已經不在了。如圖1.3.4

clipboard.png
圖1.3.4

證實cookie的session含義是在瀏覽器退出時才結束。

1.4 作什麼用比較好？

通常非到不得已，不要在cookie裏面存東西。若是要存儲的話。建議存儲一些同步訪問頁面的時候必需要被帶到服務端的信息。

好比，網站的用戶登陸信息。這個是在訪問時必需要在服務端獲取的信息，因此種在cookie裏面很必要。有的同窗會說了，那一些用戶信息呢？好比用戶在我網站都買了什麼東西，之類的。這裏建議存儲在服務端(存在數據庫裏面，或者什麼裏面)。而後使用用戶的cookie惟一ID去數據庫中查詢。咱們的目標是，沒有蛀，哦不，越少越好。

2 短暫的sessionStorage

2.1 是什麼？

sessionStorage屬於webstorage的一種，sessionStorage與咱們稍後要說的localStorage相似，能夠存儲k-v形式的數據，使用方法很是簡單set即可以存儲，如圖2.1.1。

sessionStorage.setItem('test', 'doctorhou');

clipboard.png
圖2.1.1

使用sessionStorage.getItem即可以直接獲取。如圖2.1.2：

sessionStorage.getItem('test');

clipboard.png
圖2.1.2

顧名思義，sessionStorage，是session級別的存儲。其存儲於客戶端。服務端是沒法直接拿到的。

2.2 訪問限制性

不一樣於cookie，sessionStorage的訪問限制更高一些，只有當前設定sessionStorage的域下才能訪問，並且不一樣的兩個tab之間不能互通。例，我在www.qq.com下種下了sessionStorage，在wx.qq.com下是，沒法訪問的。如圖2.2.一、圖2.2.2：

clipboard.png
圖2.2.1

clipboard.png
圖2.2.2

在新開的tab下，或者關閉本TAB再打開後(也是www.qq.com)，也是沒法訪問到以前種的sessionStorage的。如圖2.2.3：

clipboard.png
圖2.2.3

而本tab刷新的時候，sessionStorage確是能夠訪問的，如圖2.2.4

clipboard.png
圖2.2.4

以上種種，證實sessionStorage裏面的session，並不一樣於cookie，是以tab爲級別的session。

2.4 作什麼用比較好？

既然是存儲於客戶端並且存儲級別僅僅是一個session的話，仍是建議存儲一些當前頁面刷新須要存儲，且不須要在tab關閉時候留下的信息。剛剛說了，只有頁面刷新纔不會清除掉sessionStorage。剩下的均會清理掉sessionStorage，固然，也許能夠用sessionStorage來檢測用戶是不是刷新進入的頁面。對於音樂播放器恢復播放進度條等功能等仍是挺實用的。

3 簡易強大的localStorage

3.1 是什麼？

localStorage與sessionStorage較爲類似，接口也簡單，經過localStorage.setItem/localStorage.getItem便可輕鬆使用，如圖3.1.1。

localStorage.setItem('test', 'doctorhou');
localStorage.getItem('test');

clipboard.png
圖3.1.1

localStorage能夠存儲k-v形式的數據。存儲的值須要是字符串類型，無法直接存儲對象，可是能夠將對象序列化爲字符串再存入。若是強行存入object的話，就會被調用object.toString從而悲劇。悲劇的存法，效果如圖3.1.2：

var doctorhou = {
    name: 'doctorhou',
    describe: '高大、威猛、帥氣'
};
localStorage.setItem('test', doctorhou);
localStorage.getItem('test');

clipboard.png
圖3.1.2

正確的存取方法，效果如圖3.1.3：

var doctorhou = {
    name: 'doctorhou',
    describe: '高大、威猛、帥氣'
};
localStorage.setItem('test', JSON.stringify(doctorhou));
JSON.parse(localStorage.getItem('test'));

clipboard.png
圖3.1.3

localStorage的存儲週期比sessionStorage長，若是用戶不清理的話，是能夠永久存儲的。

3.2 訪問的限制性

localStorage與sessionStorage雖然類似，可是訪問限制卻不盡相同，localStorage的訪問域默認設定爲設置localStorage的當前域，其餘域名不能夠取。這點與sessionStorage相同，可是與sessionStorage不一樣的是，localStorage設定後，新開tab是能夠訪問到的，如圖3.2.1與圖3.2.2

clipboard.png
圖3.2.1

clipboard.png
圖3.2.2

3.3 存儲時間

localStorage理論上講是永久性質的存儲。可是，免不了用戶會使用瀏覽器清除數據，或者瀏覽器有時候爲了節省，去清除數據。

3.4 大小限制及檢測

localStorage的大小通常限定爲4M左右，這點能夠根據實際瀏覽器來測試。那麼，如何檢測本身已經消耗了多少空間呢？能夠直接將localStorage序列化，看看其字節數，就能夠算出其已經佔用的空間了(可能會有點偏差，這樣作會把一些轉移符號算進去，能夠消除掉後再算)。如圖3.4.1，咱們看出了本身大約已經使用了61個字節的

JSON.stringify(localStorage)

clipboard.png
圖3.4.1

3.5 作什麼用比較好

因爲localStorage的穩定性質，及其長效的存儲。筆者建議若是有一些數據，服務器難以承載其壓力，但又要與用戶的信息綁定的話，可使用localStorage存儲一些狀態，這樣即能緩解服務端壓力，也能夠存儲用戶的數據。固然，也有一些小技巧，能夠用localStorage提升網站訪問的速度。如筆者寫的一篇淺析文章：
聊一聊百度移動端首頁前端速度那些事兒
讀者們能夠嘗試使用。

4 websql與indexeddb

4.1 是什麼？

這兩位但是web存儲中的重型武器。爲何放在一塊兒說呢，是由於，websql的標準，官方已經不打算維護了，轉而維護了新的indexeddb，讀者可能會問了，那直接說indexeddb就行了，爲啥還要說websql，由於websql雖然過期了，可是其兼容性卻出奇的好，幾乎是移動端都可用呀。咱們來看一下caniuse上的兼容性數據：

websql的兼容性如圖4.1.1

clipboard.png
圖4.1.1

indexeddb的兼容性卻不是很好，android4.4以前以及ios7之前都沒法使用。如圖4.1.2

clipboard.png
圖4.1.2

因此筆者建議以下，能用indexeddb的時候，就要使用indexeddb，由於其表明了將來的發展方向。若是用不了indexeddb的儘可能使用websql進行代替。其實就是使用一段膩子腳本(polyfill)便可，作一下兼容。接下來咱們會嘗試作一點膩子腳本。

websql更像是關係型數據庫，而且使用sql語句進行操做，效果如圖4.1.2

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <script>
            var db = window.openDatabase('testDB', '1.0', 'TestDb', 2 * 1024 * 1024);
            db.transaction(function (context) {
                context.executeSql('CREATE TABLE IF NOT EXISTS cubefe(id, name)');
                context.executeSql('INSERT INTO cubefe (id, name) VALUES (1, "doctorhou")');
            }); 
        </script>
    </body>
</html>

clipboard.png
圖4.1.2

indexeddb更像是nosql，直接使用js的方法操做數據便可，效果如圖4.1.3

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <script>
            var startTime = +new Date();
            console.log('starttime:', startTime);
            function openDB(dbname, version, cb) {
                var request = window.indexedDB.open(dbname);
                request.onsuccess = function (e) {
                    var db = e.target.result;
                    myDB.db = db;
                    var version = db.version;
                    if (!db.objectStoreNames.contains('students')) {
                        request = db.createObjectStore('students', {autoIncrement: true});
                    }
                    cb && cb(e);
                };
            }   

            var myDB = {
                name: 'test',
                version: 4,
                db: null
            };

            openDB(myDB.name, myDB.version, function (e) {
                var db = e.target.result;
                var storeName = 'students';
                var transaction = db.transaction(storeName, 'readwrite');
                var store = transaction.objectStore(storeName);
                store.put({id: 2, name: 'doctorhou'}, 'b');
                var request = store.get(1);
                request.onsuccess = function (e) {
                    console.log(request.result);
                    var endTime = +new Date();
                    console.log('take-time:', endTime - startTime);
                };
            });

        </script>
    </body>
</html>

clipboard.png
圖4.1.3

4.2 訪問

indexeddb和websql在這一點上與localStorage一致，均是在建立數據庫的域名下才能訪問。並且不能指定訪問域名。

4.3 存儲時間

這兩位的存儲時間也是永久，除非用戶清除數據，能夠用做長效的存儲。

4.4 大小限制

理論上講，這兩種存儲的方式是沒有大小限制的。然而indexeddb的數據庫超過50M的時候瀏覽器會彈出確認。基本上也至關於沒有限制了。

4.5 性能如何？

我這邊作了個實驗，indexeddb查詢少許數據也就花費了20MS左右。仍是很快的。如圖4.5.1

clipboard.png
圖4.5.1

大量數據的狀況下，相對耗時會變長一些，可是也就在30MS左右，也是至關給力了。如圖4.5.2所示，10W數據+，畢竟nosql。

for (var i = 0; i < 100000; i++) { 
    store.add({id: 2, name: 'doctorhou'});
}

clipboard.png
圖4.5.2

而websql這邊的效率也不錯，10w+數據，簡單查詢一下，只花費了20MS左右，如圖4.5.3所示

<script>
var startTime = +new Date();
var db = window.openDatabase('testDB', '1.0', 'TestDb', 2 * 1024 * 1024);
db.transaction(function (context) {
    context.executeSql('CREATE TABLE IF NOT EXISTS cubefe(id, name)');
    /*for (var i = 0; i < 100000; i++) {
        context.executeSql('INSERT INTO cubefe (id, name) VALUES (i, "doctorhou")');
    }*/
    context.executeSql('SELECT * FROM cubefe WHERE rowid="99999"', [], function (tx, results) {    
        console.log(results);
        console.log('take-time', (+new Date()) - startTime);
    }, null);
}); 
</script>

clipboard.png
圖4.5.3

4.6 拿來幹什麼用？

當咱們是在作一個離線應用，或者webapp的時候，能夠考慮使用本地數據庫中存取數據。若是不存大量的數據的話，其實localStorage就夠用了。亦或者，你想把一張用戶的皮膚圖片之類的大量數據存入客戶端緩存起來，localStorage已經不夠用了的話，也能夠嘗試一下websql與indexeddb。

接下來的一篇文章，我將會和讀者們一塊兒聊聊前端調試那些事兒，不要走開，請關注我.....

http://www.javashuo.com/article/p-cdimbaxv-gq.html

若是喜歡本文請點擊下方的推薦哦，你的推薦會變爲我繼續更文的動力。

以上內容僅表明筆者我的觀點，若有意見筆者願意學習參考各讀者的建議。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程