讲到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含义是在浏览器退出时才结束。
接下来说的sessionStorage、localStorage等都是存储在客户端的，服务器端是没办法直接拿到
sessionStorage的访问限制更高一些，只有当前设定sessionStorage的域下才能访问，而且不同的两个tab之间不能互通
设置的sessionStorage，刷新tab标签后能够访问，一旦关闭当前tab就无法再获取到了，所以
localStorage如果用户不清理的话，那就是永久存储的，localStorage的最大存储容量为5M
webSql虽然官方说不打算再维护了，但是兼容性却非常好
websql更像是关系型数据库，并且使用sql语句进行操作
<!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的方法操作数据即可
<!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的区别
localStorage.key我相信大家用的少，但确实也是可以通过这个api方便很多操作的
总结一下各自的用途：
cookie:存储一些同步访问页面的时候必须要被带到服务端的信息。
sessionStorage:建议存储一些当前页面刷新需要存储，且不需要在tab关闭时候留下的信息
localStorage:建议如果有一些数据，服务器难以承载其压力，但又要与用户的信息绑定的话，可以使用localStorage存储一些状态，这样即能缓解服务端压力，也可以存储用户的数据
indexDB和websql：建议如果有一些数据，服务器难以承载其压力，但又要与用户的信息绑定的话，可以使用localStorage存储一些状态，这样即能缓解服务端压力，也可以存储用户的数据
参考文献： [聊一聊系列]聊一聊前端存储那些事儿
扫一扫
2219
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
