早期只有一种浏览器存储方式,就是万维网早期,由网景公司设计,加入了 HTTP 1.0 的 Cookie。
HTTP5 的时代,一次性加入了三种 API,分别是 Web Storage,IndexedDB,Web SQL。
- Cookie:通过小型文本文件,在浏览器端存储一些字符类型 key-value 数据,支持设置一些属性。
- 有单个 Cookie 的大小限制,也有 Cookie 总数限制。这个因浏览器不同而不同(大小尽可能控制在 4KB 以内)。
- 每一次 HTTP 调用都会自动带上,发送给服务器端。
- Web Storage:可以存储大量字符类型的 key-value 数据。
- localStorage:没有时间限制。
- sessionStorage:会话结束时自动清除。
- IndexedDB:NoSQL 数据库,可以存储大量的结构化数据。API 相对复杂一丢丢
- 功能强大,甚至支持事务和索引。
- 异步 API。
- Web SQL:基于 SQL 的浏览器端数据库,后来被废弃。
Cookie
Set-Cookie: name=value; expires=Mon, 21 Oct 2019 07:28:00 GMT; path=/; domain=.example.com; secure; HttpOnly
expires
过期时间,GMT 格式。如果不设置该属性,则 Cookie 的生命周期为当前会话,即关闭浏览器后 Cookie 就会被删除。path
路径,表示该 Cookie 归属于哪个路径。默认为当前页面的路径。domain
域名,表示该 Cookie 归属于哪个域名。默认为当前页面的域名。secure
只能通过 HTTPS 协议传输,不能通过 HTTP 协议传输。HttpOnly
只在网络传输时使用,不能通过 JavaScript 访问。
Web Storage
localStorage.setItem('key', 'value');
var value = localStorage.getItem('key');
sessionStorage.setItem('key', 'value');
var value = sessionStorage.getItem('key');
setItem(key, value)
存储数据getItem(key)
读取数据removeItem(key)
删除数据clear()
清空数据 (删除所有的键值对)key(index)
获取键名 (根据索引获取对应的键名)
IndexedDB
没有研究过。
// 打开数据库
var request = indexedDB.open('myDatabase', 1);
// 创建对象仓库
request.onupgradeneeded = function(event) {
var db = event.target.result;
var objectStore = db.createObjectStore('users', { keyPath: 'id' });
objectStore.createIndex('name', 'name', { unique: false });
objectStore.createIndex('age', 'age', { unique: false });
};
// 存储数据
request.onsuccess = function(event) {
var db = event.target.result;
var transaction = db.transaction(['users'], 'readwrite');
var objectStore = transaction.objectStore('users');
var user = { id: 1, name: '张三', age: 20 };
var request = objectStore.add(user);
request.onsuccess = function(event) {
console.log('数据存储成功');
};
};
// 读取数据
request.onsuccess = function(event) {
var db = event.target.result;
var transaction = db.transaction(['users'], 'readonly');
var objectStore = transaction.objectStore('users');
var index = objectStore.index('name');
var request = index.get('张三');
request.onsuccess = function(event) {
var user = event.target.result;
console.log(user);
};
};