前端存储方案总结

作者: 写前端的大叔 | 来源:发表于2020-02-10 19:20 被阅读0次

昨天接了电话面试，面试前端的，面试官问了一下cookie和session的区别，当时回答的session是用于服务端的，其实不单单是存储位置不同，还有其它的区别，下面为cookie和session的区别。

存储位置不同：cookie是保存在浏览器端，session是保存在服务器上。

存储方式不同：cookie是保存字符串，session是保存对象。

安全性不同：cookie是保存在浏览器端，如果不加密，很容易被获取到。session是保存在服务器上的，相对安全一些。

有效期限不同：cookie是可以设置缓存时间的，用户可以手动清除，session在浏览器关闭的时候就会清空掉。

对服务器的压力不同：cookie保管在客户端，不占用服务器资源。假如并发阅读的用户十分多，cookie是很好的选择。
session是保管在服务器端的，每个用户都会产生一个session。假如并发访问的用户十分多，会产生十分多的session，耗费大量的内存。

在客户端除了cookie在任外，还有storage相关的存储，为了加深下这方面的知识，特意来总结下各缓存方案的优缺点，首先用chrome浏览器打开调试工具，可以看到浏览器storage提供的存储方案。如下所示：

Storage.png
由图可知，Storage存储方案一共包括5种，分别为：Local Storage，Session Storage，IndexedDB，Web SQL，Cookies。

1.Local Storage

localStorage是window上的一个对象，该对象是只读的。存储的数据将保存在浏览器会话中，当浏览器关闭后数据不会被清空，并且键值都是以字符串的方式存储。通过如下图可以查看原型链上的方法：

LocalStorage.png

getItem

接受一个键名和值作为参数，将会把键名添加到存储中，如果键名已存在，则更新其对应的值。如下所示：

setItem

            var obj = {a:'aaa',b:'bb'}
            localStorage.setItem('test1','这是值')
            localStorage.setItem('obj',JSON.stringify(obj));

removeItem

接受一个键名作为参数，会从给定的Storage对象中删除该键名（如果存在）。如果没有与该给定键名匹配的项，则此方法将不执行任何操作。

localStorage.removeItem('obj');

clear

用于清空存储对象里所有的键值。

localStorage.clear();

key

接受一个数值 n 作为参数，返回存储对象第 n 个数据项的键名。键的存储顺序是由用户代理定义的，所以尽可能不要依赖这个方法。

            var obj = {a:'aaa',b:'bb'}
            localStorage.setItem('test1','这是值')
            localStorage.setItem('obj',JSON.stringify(obj));
            var value = localStorage.key(1);
            console.log(value);//obj

length

用于获取storage中数据项的长度。

2.Session Storage

sessionStorage跟localStorage差不多，都是用于存储字符型的键值，但存储在sessionStorage中的数据将在页面会话结束时被清空，而localStorage只能手动删除或者调用localStorage的接口进行删除。
sessionStorage的方法和属性都跟localStorage一样的，具体用法如下所示：

            var obj = {a:'aaa',b:'bb'}
            sessionStorage.setItem('test1','这是值')
            sessionStorage.setItem('obj',JSON.stringify(obj));
            var value = sessionStorage.getItem('obj');
            console.log(value);
            var key = sessionStorage.key(1);
            console.log(key);//obj
            sessionStorage.removeItem('obj');
            console.log(sessionStorage.length);//1
            sessionStorage.clear();
            console.log(sessionStorage.length);//0

3.IndexedDB

IndexedDB 是一个用于在浏览器中储存较大数据结构的 Web API,并提供索引功能以实现高性能查找. 像其他基于SQL的关系型数据管理系统一样，IndexedDB 是一个事务型的数据库系统。IndexedDB是一种低级API，用于客户端存储大量结构化数据(包括, 文件/ blobs)。该API使用索引来实现对该数据的高性能搜索。

3.1概念和用法

IndexedDB是一个事务型数据库系统，类似于基于SQL的RDBMS。然而，不像RDBMS使用固定列表，IndexedDB是一个基于JavaScript的面向对象的数据库。 IndexedDB允许您存储和检索用键索引的对象；使用IndexedDB执行的操作是异步执行的，以免阻塞应用程序。

IndexedDB使用方式

打开数据库

在数据库中创建一个对象仓库

启动一个事务，并发送一个请求来执行一些数据库操作，像增加或提取数据等

通过监听正确类型的 DOM 事件以等待操作完成

在操作结果上进行一些操作

打开数据库

使用open方法可以开启数据数据库并返回一个IDBOpenDBRequest对象，如下所示为打开一个名为testDB的数据库.

var request = window.indexedDB.open("testDB");

如果打开的数据库没有，将会自动创建，创建好数据库后，将在调试工具上可以看到刚创建的数据库，如下所示：

IndexedDB.png

回调处理

在执行时如果发生错误或成功时，可以设置回调方法，如下所示：

            //错误时的处理
            request.onerror = function(event) {
                console.log('error')
            };
            //成功时的处理
            request.onsuccess = function(event) {
                console.log('success')
            };

插入数据

IndexedDB使用的是对象存储仓库，而不是使用表来存储。并且一个单独的数据库可以包含任意数量的对象存储空间。每当一个值被存储进一个对象存储空间时，它会被和一个键相关联。下面为一个插入用户信息的示例：

            const userData = [
                { userId: "1", name: "haha", age: 35 },
                { userId: "2", name: "hehe", age: 32 }
            ];
            request.onupgradeneeded = function(event){
                db = event.target.result;
                // 建立一个对象仓库来存储用户信息，用userId 作为键路径（key path）
                var objectStore = db.createObjectStore("userList", { keyPath: "userId" });
                //创建一个索引，由于名称可能相同，unique设置为false
                objectStore.createIndex("name", "name", { unique: false });
                // 使用事务的 oncomplete 事件确保在插入数据前对象仓库已经创建完毕
                objectStore.transaction.oncomplete = function(event) {
                    // 将数据保存到新创建的对象仓库
                    var userObjectStore = db.transaction("userList", "readwrite").objectStore("userList");
                    userData.forEach(function(user) {
                        userObjectStore.add(user);
                    });
                };
            }

查询数据

现在数据库里已经有了一些信息，可以通过几种方法对它进行提取。首先是简单的 get()。需要提供键来提取值，像这样：

                var transaction = db.transaction(["userList"]);
                var objectStore = transaction.objectStore("userList");
                var request = objectStore.get("1");
                request.onerror = function(event) {
                // 错误处理!
                };
                request.onsuccess = function(event) {
                    // 对 request.result 做些操作！
                    alert(request.result.name);
                };

4.Web SQL

Web SQL 数据库 API并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 APIs。Web SQL 数据库可以在最新版的 Safari, Chrome 和 Opera 浏览器中工作。示例如下所示：

            var db = openDatabase('testDB', '1.0', 'Test DB', 2 * 1024 * 1024);
            var msg;
            
            db.transaction(function (tx) {
                tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
                tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鸟教程")');
                tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")');
                msg = '<p>数据表已创建，且插入了两条数据。</p>';
                console.log(msg);
            });
            
            db.transaction(function (tx) {
            tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
                var len = results.rows.length, i;
                msg = "<p>查询记录条数: " + len + "</p>";
                console.log(msg);
            }, null);
            });

5.Cookies

cookie是一种最原始也最简单的客户端存储方式，几乎所有的网站的都有使用cookie,各有各的用途，cookie是服务器端保存在浏览器的一小段文本信息，浏览器每次向服务器端发出请求，都会附带上这段信息。可以使用如下的方法设置cookie。

document.cookie = 'name=value'

个人博客