浅谈浏览器里面的缓存

当我们打开浏览器的开发者工具， 在Application选项框可以打开 Storage 目录，可以看到 Local storage，Session storage，IndexedDB，Web SQL，Cookies，Private state tokens，interest groups，Shared storage，Cache storage 等等这些存储，用来满足不同的应用需求。

那么这些存储方案分别的作用和原理是什么呢？

Local Storage

原理

一种浏览器提供的持久化存储解决方案。它允许网页在用户的浏览器中存储键值对数据，这些数据可以在同一个域名下的页面间共享，甚至在页面重新加载或关闭后仍然保留。与会话存储（session storage）不同，本地存储没有过期时间，数据会一直保存在用户的浏览器中，直到被显式删除或者网站清除浏览器缓存。

基于“键值对”（key-value pairs）的存储系统，每个存储的数据都有一个唯一的键（key）和相应的值（value）。它是通过JavaScript的localStorage对象实现的。

作用

需要注意的是，每个域名在浏览器中拥有独立的本地存储空间。这意味着同一个域名下的不同页面可以共享相同的本地存储数据。

Local Storage 是一个很方便的工具，但也应该谨慎使用。由于它是在用户的浏览器中存储数据，敏感信息不应该直接存储在本地存储中，因为它可以被用户查看和修改。因此，敏感信息应该由服务器进行处理，而不是存储在客户端的本地存储中。

适用场景

Local Storage通常用于存储一些轻量级的、非敏感的数据，例如：

1. 用户设置和首选项：保存用户在网站上的个性化设置，如主题、语言偏好等。

2. 会话状态：在用户会话之间保持状态，使用户在刷新页面或关闭浏览器后仍然保持登录状态。

3. 本地缓存数据：在用户的浏览器中缓存一些静态数据，减少从服务器加载数据的次数，提高网站性能。

4. 表单数据：在页面刷新或导航时保存表单数据，以防用户误操作或者需要回退。

5. 用户浏览历史：记录用户在网站上的浏览历史，以便提供相关推荐内容。

6. 临时状态信息：保存一些临时性的状态信息，比如用户在多步骤操作中的当前步骤，以便在页面刷新时恢复状态。

7. 客户端缓存数据：存储一些静态数据或者API响应结果，以减少对服务器的请求，提高网站性能。

8. 数据缓存：在需要离线访问的应用中，可以使用本地存储来缓存数据，使得应用在离线状态下依然可用。

需要注意的是，由于本地存储是在用户浏览器中存储的，因此不应该用于存储敏感信息（如密码、信用卡信息等）。对于敏感数据，应该使用更安全的方式，比如在服务器端进行处理，并且使用加密技术保护数据的传输和存储。

使用方法

1. 存储数据：

localStorage.setItem('key', 'value'); // 存储键值对数据

1. 获取数据：

var value = localStorage.getItem('key'); // 通过键获取对应的值

1. 删除数据：

localStorage.removeItem('key'); // 通过键删除对应的键值对数据

1. 清空所有数据：

localStorage.clear(); // 清空所有的本地存储数据

1. 遍历所有数据（注意，这是一个非标准方法，不是所有浏览器都支持）：

for (var i = 0; i < localStorage.length; i++) {    var key = localStorage.key(i);    var value = localStorage.getItem(key);    // 处理键值对数据}

Session storage

原理

Session Storage 是一种 Web 存储技术，使用了键值对（key-value）的存储方式。与 Local Storage 类似，不同之处在于 Session Storage 存储的数据仅在当前会话期间有效，当用户关闭浏览器标签页或浏览器时，Session Storage 中的数据就会被清除。

作用

Session Storage 主要用于在用户的会话期间（即在同一个浏览器标签页或窗口中）存储临时数据。它提供了在页面之间传递数据的简单方式，不需要依赖服务器端存储，而且数据的作用范围局限于当前会话。

适用场景

• 表单数据暂存：当用户填写长表单时，可以将数据暂存在 Session Storage 中，以防用户意外关闭页面而导致数据丢失。

• 临时状态保存：在多步骤的操作过程中，可以使用 Session Storage 保存用户当前的操作步骤，以便在用户返回上一步时恢复状态。

• 临时会话数据：存储一些临时性的用户会话数据，如购物车内容，在用户会话结束时清除，避免占用服务器资源。

使用方法

Session Storage 使用 JavaScript 的 sessionStorage 对象来访问和操作数据。

存储数据：

sessionStorage.setItem('key', 'value'); // 存储键值对数据到 Session Storage

获取数据：

var value = sessionStorage.getItem('key'); // 通过键获取 Session Storage 中的值

删除数据：

sessionStorage.removeItem('key'); // 通过键删除 Session Storage 中的键值对数据

清空所有数据：

sessionStorage.clear(); // 清空所有的 Session Storage 数据

需要注意的是，Session Storage 中的数据仅在当前会话期间有效。如果用户关闭了标签页或浏览器窗口，数据就会被清除。这种行为与 Local Storage 不同，后者的数据可以长期保留。因此，Session Storage 更适合那些需要在短时间内传递数据或保存临时状态的场景。

IndexedDB

原理

IndexedDB 是一种浏览器内置的数据库系统，它使用对象存储（object store）来存储数据。IndexedDB 允许网页在客户端（即浏览器）中存储大量结构化数据，并且提供了丰富的查询功能。

作用

IndexedDB 的主要作用是提供一个在浏览器中进行高性能数据存储和检索的机制。它允许网页应用离线工作（在没有网络连接的情况下使用存储的数据），提供了可靠的持久性存储，并且可以处理大量的数据，适用于需要大规模数据存储和复杂查询的应用。

适用场景

• 大规模数据存储：适用于需要存储大量结构化数据的应用，如邮件客户端、记事本应用等。

• 离线应用：可以使网页应用在离线状态下继续工作，提供离线访问的数据支持。

• 数据缓存：可以用于缓存大量数据，减少对服务器的请求，提高应用性能。

使用方法

IndexedDB 使用异步的API，以下是基本的使用方法：

打开数据库：

var request = indexedDB.open('myDatabase', 1); // 打开（或创建）名为 'myDatabase' 的数据库，版本号为 1

创建对象存储空间：

request.onupgradeneeded = function(event) {    var db = event.target.result;    var objectStore = db.createObjectStore('myObjectStore', { keyPath: 'id' }); // 创建一个名为 'myObjectStore' 的对象存储空间，使用 'id' 作为键};

添加数据：​​​​​​​

var request = db.transaction(['myObjectStore'], 'readwrite')    .objectStore('myObjectStore')    .add({ id: 1, data: 'some data' }); // 向 'myObjectStore' 中添加数据

读取数据：​​​​​​​

var request = db.transaction(['myObjectStore'], 'readonly')    .objectStore('myObjectStore')    .get(1); // 通过键值 1 从 'myObjectStore' 中获取数据request.onsuccess = function(event) {    var data = event.target.result;    console.log(data);};

更新数据：​​​​​​​

var request = db.transaction(['myObjectStore'], 'readwrite')    .objectStore('myObjectStore')    .put({ id: 1, data: 'updated data' }); // 更新 'myObjectStore' 中的数据

删除数据：​​​​​​​

var request = db.transaction(['myObjectStore'], 'readwrite')    .objectStore('myObjectStore')    .delete(1); // 通过键值 1 从 'myObjectStore' 中删除数据

以上代码演示了 IndexedDB 的基本使用方式。需要注意的是，IndexedDB 的 API 比较庞大，还支持复杂的查询、索引等操作，以满足不同的应用需求。使用 IndexedDB 需要处理异步操作，因此通常会使用 Promise 或回调函数来处理结果。

Web SQL

Web SQL 原理

Web SQL 是一种在浏览器中使用的关系型数据库，它允许网页通过 SQL 语句来操作客户端的数据库。Web SQL 使用 SQLite 数据库引擎，将数据库存储在用户的本地文件系统中。

Web SQL 的作用

Web SQL 主要用于在浏览器中实现复杂的数据库操作，允许网页应用创建、查询、更新和删除本地数据库中的数据。它提供了一种客户端存储和检索大量结构化数据的方式。

Web SQL 适用场景

• 复杂数据处理：适用于需要进行复杂数据处理、包括多表关联查询等操作的应用。

• 离线应用：可用于开发需要在离线状态下工作的 Web 应用，提供离线数据支持。

Web SQL 使用方法

使用 Web SQL 通常需要以下步骤：

打开数据库：

var db = openDatabase('myDatabase', '1.0', 'My Database', 2 * 1024 * 1024); // 打开（或创建）名为 'myDatabase' 的数据库，指定版本号和数据库大小

创建表：​​​​​​​

db.transaction(function(tx) {    tx.executeSql('CREATE TABLE IF NOT EXISTS users (id unique, name, age)'); // 创建名为 'users' 的表});

插入数据：​​​​​​​

db.transaction(function(tx) {    tx.executeSql('INSERT INTO users (id, name, age) VALUES (?, ?, ?)', [1, 'John', 30]); // 插入数据到 'users' 表});

查询数据：​​​​​​​

db.transaction(function(tx) {    tx.executeSql('SELECT * FROM users', [], function(tx, results) {        var len = results.rows.length;        for (var i = 0; i < len; i++) {            var user = results.rows.item(i);            console.log('ID: ' + user.id + ', Name: ' + user.name + ', Age: ' + user.age);        }    });});

更新数据：​​​​​​​

db.transaction(function(tx) {    tx.executeSql('UPDATE users SET age=? WHERE id=?', [31, 1]); // 更新 'users' 表中 ID 为 1 的数据的年龄});

删除数据：​​​​​​​

db.transaction(function(tx) {    tx.executeSql('DELETE FROM users WHERE id=?', [1]); // 删除 'users' 表中 ID 为 1 的数据});

需要注意的是，Web SQL 在现代浏览器中的支持程度逐渐降低，因为它并不是标准的Web API，并且只在部分浏览器中得到支持。因此，如果需要广泛兼容性和长期可维护性，推荐使用 IndexedDB 或其他现代的客户端存储解决方案。

Cookies

Cookies 原理

Cookies 是一种在客户端（即用户的浏览器）存储数据的机制。当用户访问一个网站时，服务器可以发送一个包含小段文本的 HTTP 响应头给客户端，客户端会将这个文本存储在本地，每次用户再次访问该网站时，这些信息会被发送给服务器，以便识别用户状态或记录其他信息。

Cookies 的作用

Cookies 的主要作用是在客户端存储少量的数据，通常用于：

• 会话管理：用于跟踪用户的登录状态，使用户保持登录状态。

• 个性化设置：存储用户的个性化设置，如语言偏好、主题等。

• 购物车数据：在购物网站上，用于存储用户的购物车内容。

• 跟踪用户行为：用于分析用户的行为，进行统计和分析。

Cookies 适用场景

• 保持登录状态：用于保持用户登录状态，避免用户每次访问页面都需要重新登录。

• 跨页面数据传递：用于在同一个网站的不同页面之间传递数据，如用户的选择、设置等。

• 记录用户行为：用于记录用户的行为，进行分析，例如网站流量分析、广告点击等。

Cookies 使用方法

设置 Cookies：

document.cookie = "username=John"; // 设置名为 "username" 的 Cookie 值为 "John"

读取 Cookies：​​​​​​​

var username = getCookie("username"); // 通过自定义函数获取名为 "username" 的 Cookie 值
function getCookie(name) {    var cookieName = name + "=";    var decodedCookie = decodeURIComponent(document.cookie);    var cookieArray = decodedCookie.split(';');    for (var i = 0; i < cookieArray.length; i++) {        var cookie = cookieArray[i];        while (cookie.charAt(0) === ' ') {            cookie = cookie.substring(1);        }        if (cookie.indexOf(cookieName) === 0) {            return cookie.substring(cookieName.length, cookie.length);        }    }    return "";}

删除 Cookies：

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"; // 删除名为 "username" 的 Cookie

需要注意的是，Cookies 有一些限制，包括每个域名下的 Cookies 数量和大小限制，也存在隐私安全性的问题，因此不应该用来存储敏感信息。对于敏感信息，应该使用加密技术，或者在服务器端进行处理，而不是存储在客户端的 Cookies 中。

Private state tokens

Private State Tokens 原理

Private State Tokens 是一种安全机制，用于在客户端存储敏感信息，同时保持这些信息的私密性。这种方法通常基于加密算法，确保客户端存储的数据只能由特定的服务端解密和访问。

Private State Tokens 的作用

Private State Tokens 的主要作用是在客户端存储敏感信息（例如用户的登录状态、权限信息等），并确保这些信息在客户端存储时是加密的，只有服务端才能解密并读取。

Private State Tokens 适用场景

• 保持用户登录状态：在客户端存储用户的登录状态，以便在页面刷新或重新访问时恢复用户的会话。

• 存储权限信息：将用户的权限信息安全地存储在客户端，以便在客户端进行权限控制，减轻服务器端的负担。

• 客户端存储其他敏感信息：可以用于存储其他敏感信息，如用户的加密密钥等。

Private State Tokens 使用方法

使用 Private State Tokens 需要以下步骤：

1. 在服务器端生成 Token：服务器端生成一个私密的 Token，并将需要在客户端存储的敏感信息加密成 Token。

2. 将 Token 发送到客户端：服务器将生成的 Token 发送给客户端，客户端将其存储在本地，通常是在浏览器的 Local Storage 或 Session Storage 中。

3. 在需要的时候解密 Token：当客户端需要使用敏感信息时，将 Token 发送给服务器端。服务器端解密 Token，获取其中的敏感信息，并返回给客户端。

4. 定期更新 Token：为了提高安全性，可以定期更新 Token，防止 Token 被截获后长期滥用。

interest gourps

Interest Groups 原理

Interest Groups（兴趣群体）是一种将用户根据他们的兴趣、喜好、行为等特征划分成不同群组的机制。这种分组可以帮助平台更好地了解用户需求、提供个性化服务，同时也有助于精准推送内容和广告。

Interest Groups 的作用

Interest Groups 的主要作用是提供个性化的用户体验。通过将用户分组，平台可以：

• 个性化推荐：根据用户的兴趣向特定群体推送相关内容、产品或服务。

• 精准广告投放：将广告定向投放到对特定产品或服务有兴趣的用户群体，提高广告的转化率。

• 改善用户满意度：通过满足用户的个性化需求，提高用户满意度和忠诚度。

Interest Groups 适用场景

• 内容平台：在新闻、社交媒体、视频流媒体等内容平台中，根据用户的阅读、观看历史和兴趣爱好，推送相关内容。

• 电商平台：根据用户的购买历史、浏览行为和搜索记录，为用户推荐相关商品。

• 社交网络：基于用户的朋友圈、关注、点赞等社交行为，提供个性化的社交建议和推送。

• 数字广告平台：将广告精准投放到特定兴趣群体，提高广告效果。

Interest Groups 使用方法

1. 数据收集：收集用户的行为数据，包括浏览记录、购买历史、搜索关键词等。

2. 数据分析：使用数据分析工具和算法，将用户数据进行处理和分析，识别出用户的兴趣和行为模式。

3. 群体划分：根据分析的结果，将用户划分成不同的兴趣群体，每个群体具有相似的兴趣和行为特征。

4. 个性化服务：根据用户所属的兴趣群体，提供个性化的服务，包括内容推荐、产品推荐、广告投放等。

5. 持续优化：定期分析用户数据，调整群体划分和个性化推荐策略，保持兴趣群体的准确性和个性化服务的效果。

Shareh storage

Shared Storage 原理

Shared Storage（共享存储）是一种机制，允许不同的应用程序或组件在同一设备上共享数据。这种共享通常基于特定的存储空间，使得应用程序之间可以读取和写入共享数据，以便实现数据共享和协作。

Shared Storage 的作用

Shared Storage 的主要作用是促进不同应用程序之间的数据共享和互操作。它可以用于：

• 数据共享：不同应用程序之间共享用户数据、文件、设置等信息。

• 协同编辑：多个应用程序可以共同编辑和处理同一份数据或文件。

• 跨应用同步：保持不同应用程序之间特定数据的同步状态。

Shared Storage 适用场景

• 文档编辑：多个文档编辑应用程序可以共同编辑和保存同一个文档。

• 媒体文件共享：多个应用程序可以共享相同的音频、视频或图片文件。

• 数据同步：不同应用程序之间需要共享和同步特定数据，例如日历事件、联系人信息等。

Shared Storage 使用方法

在 Android 操作系统中，共享存储通常通过文件系统、Content Provider 或共享偏好（Shared Preferences）等机制实现。以下是使用 Shared Preferences 实现 Shared Storage 的基本方法：

写入共享数据：​​​​​​​

SharedPreferences sharedPref = getSharedPreferences("shared_data", Context.MODE_PRIVATE);SharedPreferences.Editor editor = sharedPref.edit();editor.putString("key", "value"); // 存储键值对数据editor.apply();

读取共享数据：​​​​​​​

SharedPreferences sharedPref = getSharedPreferences("shared_data", Context.MODE_PRIVATE);String value = sharedPref.getString("key", defaultValue); // 通过键获取共享数据，可以提供默认值

需要注意的是，在不同的应用程序之间实现 Shared Storage 通常需要合适的权限设置和安全性考虑，以确保数据的隐私和安全。在 Android 中，还可以使用 Content Provider 和共享文件来实现更复杂的共享场景。

Cache storage

Cache Storage 原理

Cache Storage 是浏览器提供的一种存储机制，用于存储网络请求的响应数据，以便在之后的访问中提供快速的访问速度。Cache Storage 使用类似于键值对的方式存储请求的响应，允许开发者在网页应用中缓存静态资源或者动态数据。

Cache Storage 的作用

Cache Storage 的主要作用是提高网页性能和用户体验。它可以用于：

• 提供离线访问：存储网页资源，使得用户在没有网络连接时仍然能够访问应用。

• 加速网页加载：缓存静态资源（如图片、CSS、JavaScript 文件等），加速网页的加载速度。

• 优化用户体验：在有网络连接时，从 Cache Storage 加载资源，减少对服务器的请求，提高页面响应速度。

Cache Storage 适用场景

• 离线应用：适用于需要在离线状态下继续工作的 Web 应用，存储应用的核心资源和数据。

• 静态资源缓存：缓存网页的静态资源，例如图片、CSS 文件、JavaScript 文件等，提高网页加载速度。

• 动态数据缓存：缓存动态生成的数据，例如 API 请求的响应，以减少对服务器的请求，提高页面性能。

Cache Storage 使用方法

缓存资源：​​​​​​​

caches.open('my-cache').then(function(cache) {    return cache.addAll([        '/index.html',        '/styles.css',        '/script.js'    ]);});

从缓存中获取资源：​​​​​​​

caches.match('/index.html').then(function(response) {    if (response) {        return response;    }    // 如果缓存中没有，可以发起网络请求或者返回一个默认的响应});

删除缓存：​​​​​​​

caches.open('my-cache').then(function(cache) {    cache.delete('/index.html'); // 删除指定的缓存项    cache.clear(); // 清空整个缓存});

更新缓存：​​​​​​​

caches.open('my-cache').then(function(cache) {    cache.match('/index.html').then(function(response) {        if (response) {            // 发起网络请求获取最新的资源            fetch('/index.html').then(function(newResponse) {                cache.put('/index.html', newResponse); // 更新缓存中的资源            });        }    });});

Cache Storage API 提供了灵活的缓存策略，可以根据开发者的需求制定不同的缓存策略，以实现更好的性能优化和用户体验。