说说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存储一些状态，这样即能缓解服务端压力，也能够存储用户的数据浏览器

参考文献： [聊一聊系列]聊一聊前端存储那些事儿安全