客户端服务端存储🐤

[WangXiZhu]

原文链接

在浏览器中存储数据有很多优点，最主要的就是对“数据”能够快速并且在不依赖网络就能访问。目前有四种方式（额外一个不建议）在客户端来存储数据。

1. Cookie
2. Local Storage
3. Session Storage
4. IndexedDB
5. WebSQL (deprecated)

Cookie

Cookie是最经典的方式在文档中存储简单字符串数据。
cookie是从服务端传送到客户端，并能进行存储。然后客户端请求数据的时候又会返回给服务端。 这对于管理用户 session和记录用户信息非常有帮助。

另外，cookies也能在客户端只用来存储数据。所以，它常常被用来存储一些比较常用的数据，如用户设置。

操作Cookie

我们可以使用下面的语法来新增，读取，更新和删除cookies。

// 新增
document.cookie = "user_name=Ire Aderinokun";  
document.cookie = "user_age=25;max-age=31536000;secure";

// 读取 (All)
console.log( document.cookie );

// 更新
document.cookie = "user_age=24;max-age=31536000;secure"; 

// 删除
document.cookie = "user_name=Ire Aderinokun;expires=Thu, 01 Jan 1970 00:00:01 GMT";  

优点

• 可以与服务端交互
• 我们可以设置cookie到期，而不用人工地进行删除

缺点

• 随文档的加载加入到页面中
• 只能存少量数据
• 只能存字符串（Strings）对象
• 涉及到安全问题
• 由于有了WEB 存储（本地存储和会话存储），并不建议使用这种方法来作为客户端存储

浏览器支持度

几乎所有主流浏览器都支持

本地存储

本地存储是Web存储的一种，它可以用来在浏览器中存储键－值对数据。它相比cookie为我们提供了更安全的方式在浏览器端存储数据。

尽管我们在本地存储中只能存储字符串，这也意味着我们能够存储JSON。这相对Cookie可以存储更加复杂的数据。

本地存储操作

新增，读取，更新和删除语法如下

// Create
const user = { name: 'Ire Aderinokun', age: 25 }  
localStorage.setItem('user', JSON.stringify(user));

// Read (Single)
console.log( JSON.parse(localStorage.getItem('user')) ) 

// Update
const updatedUser = { name: 'Ire Aderinokun', age: 24 }  
localStorage.setItem('user', JSON.stringify(updatedUser));

// Delete
localStorage.removeItem('user');  

本地存储优点

• 提供更佳简单直观的方法来存储数据（相对cookie）
• 在客户端存储更加安全（比Cookie）
• 支持存储更多数据（比Cookie）

缺点

• 只能存储字符串

支持度

http://caniuse.com/#feat=namevalue-storage

会话存储

会话存储是Web存储的第二种方式。它和本地存储类似，除了数据是存储在浏览器选项卡会话中。一旦用户关闭浏览器选项卡，数据就会被清空。

会话存储操作

// Create
const user = { name: 'Ire Aderinokun', age: 25 }  
sessionStorage.setItem('user', JSON.stringify(user));

// Read (Single)
console.log( JSON.parse(sessionStorage.getItem('user')) ) 

// Update
const updatedUser = { name: 'Ire Aderinokun', age: 24 }  
sessionStorage.setItem('user', JSON.stringify(updatedUser));

// Delete
sessionStorage.removeItem('user');  

浏览器支持度

和本地存储一样

IndexedDB

IndexedDB是一种在浏览器中存储数据更佳复杂和全面的方式。 它是一种“在客户端存储重要的结构化数据的低级方式”。它是一种基于javascript,面向对象的数据库，便于我们更加容易存储并且可以通过下标来进行查找数据。

在我的 Building a Progressive Web Application 一文中，我更加详细地介绍了如何使用IndexedDB来创建一个离线应用。

操作IndexedDB

IndexedDB相对于其他浏览器存储的方式更加复杂。在我们新增/读取/更新/删除数据之前，我们需要打开数据库，新建存储空间。

function OpenIDB() {  
    return idb.open('SampleDB', 1, function(upgradeDb) {
        const users = upgradeDb.createObjectStore('users', {
            keyPath: 'name'
        });
    });
}

为了在库中创建（更新）数据，我们需要使用下面的步骤

// 1. Open up the database
OpenIDB().then((db) => {  
    const dbStore = 'users';

    // 2. Open a new read/write transaction with the store within the database
    const transaction = db.transaction(dbStore, 'readwrite');
    const store = transaction.objectStore(dbStore);

    // 3. Add the data to the store
    store.put({
        name: 'Ire Aderinokun',
        age: 25
    });

    // 4. Complete the transaction
    return transaction.complete;
});

使用下面的步骤来检索数据

// 1. Open up the database
OpenIDB().then((db) => {  
    const dbStore = 'users';

    // 2. Open a new read-only transaction with the store within the database
    const transaction = db.transaction(dbStore);
    const store = transaction.objectStore(dbStore);

    // 3. Return the data
    return store.get('Ire Aderinokun');
}).then((item) => {
    console.log(item);
});

最后，如何删除数据呢？如下方式

// 1. Open up the database
OpenIDB().then((db) => {  
    const dbStore = 'users';

    // 2. Open a new read/write transaction with the store within the database
    const transaction = db.transaction(dbStore, 'readwrite');
    const store = transaction.objectStore(dbStore);

    // 3. Delete the data corresponding to the passed key
    store.delete('Ire Aderinokun');

    // 4. Complete the transaction
    return transaction.complete;
});

如果对IndexedDB感兴趣，可以移步这篇文章

IndexedDB 优点

• 能处理更复杂的，结构化的数据
• 在每个数据库中可以有多库多表
• 允许多类型数据存储
• 我们能够更好地控制

IndexedDB 缺点

• 相对Web存储来说更加复杂

支持率

WebSQL

webSQL是客户端的关系数据库，类似SQLite。在2010的时候 W3C工作组停止了该方案。在HTML方案中已经被除名，所有我们最好不要使用

对比图

功能	Cookies	本地存储	会话存储	IndexedDb
存储大小	~4kb	~5MB	~5MB	取决于硬件
是否持久化	是	是	否	是
数据类型	字符串	字符串	字符串	任何结构化数据
是否有下标	否	否	否	是

译者添加

• 在浏览器中如何存储cookie的？

在chrome中居然使用SQLite存储？ chrome中存储文件

有的浏览器存储cookie是每个小文件一个，其中FireFox是把所有的cookie存在一个单独的文件中。

每个域名下对应不同的cookie。

https://support.mozilla.org/en-US/kb/cookies-information-websites-store-on-your-computer

https://support.mozilla.org/en-US/kb/cookies-information-websites-store-on-your-computer

[WangXiZhu]

Cookie作为Http协议的一个扩展。在客户端与服务端的交互。其中http是无状态的，cookie作为中间物来进行通知。

同时cookie具有不可跨域名性，即使是 www.baidu.com和 h5.baidu.com虽然有相同二级域名，但是三级不一样，对应的cookie也是不影响的。除了做处理。

可以设置对应的域。

Cookie cookie = new Cookie("time","20080808"); // 新建Cookie
cookie.setSecure(true); // 设置安全属性
cookie.setDomain(".helloweenvsfei.com"); // 设置域名

关于安全性，最好对cookie内容进行加密，解密
它们的通讯过程如下。

http://www.admin10000.com/document/7097.html