客户端存储概述

直接在浏览器中存储数据有很多好处，主要是快速和网络无关地访问“数据库”。 目前有四种活动方法（加上一种已弃用），用于在客户端存储数据 –

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

Cookies

Cookie是在文档中存储简单字符串数据的经典方式。 通常，cookie从服务器发送到客户端，然后客户端可以存储cookie，并在后续请求时将其发送回服务器。 这可用于管理帐户会话和跟踪用户信息。

此外，cookie可以用于纯粹在客户端存储数据。 因此，它们也被用于存储一般数据，例如用户偏好。

带有Cookie的基本CRUD

我们可以使用以下语法创建，读取，更新和删除Cookie：

JavaScript

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

// Read (All)
console.log( document.cookie );

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

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

Cookie的优点

• 它们可用于与服务器通信
• 我们可以设置我们希望Cookie自动过期，而不是手动删除

Cookies的缺点

• 它们添加到文档的页面加载
• 它们只能存储少量的数据
• 他们只能存储字符串
• 潜在的安全性问题
• 它不是客户端存储推荐的方法了，因为推出的Web存储API （本地和会话存储）

支持

Cookie在所有主要浏览器中都有基本支持。

本地存储

本地存储是一种类型的网络存储API ，它是在浏览器中存储数据的键-值对的API。 它通过提供一个更直观和安全的API来存储浏览器中的简单数据，解决Cookie的问题。

虽然技术上我们只能在本地存储中存储字符串，这可以通过存储字符串JSON来解决。 这使我们能够在本地存储中存储比Cookie更复杂的数据。

带本地存储的基本CRUD

我们可以使用以下语法创建，读取，更新和删除数据到本地存储：

JavaScript

// 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');  

本地存储的优点

• 提供更简单的直观界面来存储数据（比Cookies）
• 客户端存储更安全（比Cookie）
• 允许存储更多数据（比Cookie）

本地存储的缺点

• 只允许存储字符串

支持

会话存储

会话存储是第二类型的Web存储API 。 它与本地存储完全相同，只是数据仅为浏览器选项卡会话存储。 一旦用户离开页面或关闭浏览器，数据就会被清除。

带会话存储的基本CRUD

我们可以使用以下语法创建，读取，更新和删除会话存储中的数据：

// 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是一个更复杂和全面的解决方案，用于在浏览器中存储数据。 它是“用于大量结构化数据的客户端存储的低级API”（Mozilla）。 它是一个基于JavaScript的，面向对象的数据库，允许我们轻松地存储和检索已用索引索引的数据。

在我的文章构建一个渐进的Web应用程序 ，我去了更详细的如何使用IndexedDB的创建离线首次应用。

带有IndexedDB的基本CRUD

注：在我所有的例子中，我使用了杰克阿奇博尔德的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的缺点

• 使用比Web Storage API更复杂

支持

WebSQL

WebSQL是客户端上的关系数据库的API，类似于SQLite。 自2010年以来，W3C Web应用程序工作组停止了对该规范的工作。 它不再是HTML说明书的一部分，并且不应当被使用 。

差异比较

转载请注明：TUTERM.COM » 客户端存储概述