說說cookie、localstorage等前端存儲

時間 2019-12-20

標籤說說 cookie localstorage 前端存儲欄目 HTML 简体版

原文原文鏈接

講到cookie，個人第一反應是即使它的存儲容量小，可是它永遠也不太可能被其它例如localstorage、sessionstorage等取代，由於它的特性：會在請求時把數據發送到服務器端，因此通常狀況下會盡可能要求cookie小並且不要存放敏感性信息，由於若是一旦請求被劫持則cookie的信息就會泄露，儘可能控制cookie的生命期，使之不會永遠有效
cookie可設置域domain以達到幾個子域名共享父級域名下的cookie
經過expires設置cookie失效時間
cookie的存儲容量最大大約爲4096字節，每一個domain最多隻能有20條cookie，每一個cookie長度不能超過4KB，不然會被截掉
考慮到cookie的安全性問題，cookie字段加上HttpOnly標識,這樣客戶端js是沒法讀到與寫入加了標識的cookie字段的
若是設定了cookie的超時時間的話，那麼cookie將在到期的時候失效。若是沒有設定，那麼cookie就是session級別，cookie的session是，在未關閉瀏覽器的狀況下，全部的tab級別的頁面或新開，或刷新，均屬於一個session，cookie的session含義是在瀏覽器退出時才結束。html

接下來講的sessionStorage、localStorage等都是存儲在客戶端的，服務器端是沒辦法直接拿到
sessionStorage的訪問限制更高一些，只有當前設定sessionStorage的域下才能訪問，並且不一樣的兩個tab之間不能互通
設置的sessionStorage，刷新tab標籤後可以訪問，一旦關閉當前tab就沒法再獲取到了，因此前端

localStorage若是用戶不清理的話，那就是永久存儲的，localStorage的最大存儲容量爲5M

webSql雖然官方說不打算再維護了，可是兼容性卻很是好
websql更像是關係型數據庫，而且使用sql語句進行操做web

<!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>

indexeddb更像是nosql，直接使用js的方法操做數據便可sql

<!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>

跟localstorage同樣，indexeddb和websql均是在建立數據庫的域名下才能訪問。並且不能指定訪問域名。存儲時間也是永久，除非用戶清除數據，能夠用做長效的存儲
indexeddb和websql沒有大小限制，可是indexeddb的數據庫超過50M的時候瀏覽器會彈出確認，當咱們是在作一個離線應用，或者webapp的時候，能夠考慮使用本地數據庫中存取數據數據庫

最後用總結一下cookie、localstorage、sessionStorage的區別

segmentfault

localStorage.key我相信你們用的少，但確實也是能夠經過這個api方便不少操做的api

總結一下各自的用途：
cookie:存儲一些同步訪問頁面的時候必需要被帶到服務端的信息。
sessionStorage:建議存儲一些當前頁面刷新須要存儲，且不須要在tab關閉時候留下的信息
localStorage:建議若是有一些數據，服務器難以承載其壓力，但又要與用戶的信息綁定的話，可使用localStorage存儲一些狀態，這樣即能緩解服務端壓力，也能夠存儲用戶的數據
indexDB和websql：建議若是有一些數據，服務器難以承載其壓力，但又要與用戶的信息綁定的話，可使用localStorage存儲一些狀態，這樣即能緩解服務端壓力，也能夠存儲用戶的數據瀏覽器

參考文獻： [聊一聊系列]聊一聊前端存儲那些事兒安全

相關標籤/搜索

cookie&sessionstorage&localstorage

cookie&session&localstorage

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。