昨天接了电话面试，面试前端的，面试官问了一下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'
网友评论