本地存储的前世今生：从cookie到localStorage
2023-10-02 16:19:42
随着互联网的快速发展，浏览器已经成为我们生活中不可或缺的工具。我们使用浏览器来访问各种各样的网站，这些网站通常会存储一些数据在我们的计算机上，以便下次访问时能够快速加载。这些数据通常存储在cookie中。
Cookie的基本使用
cookie是一种由服务器发送给浏览器并由浏览器存储的文本文件。cookie通常包含一些基本信息，如用户的登录状态、购物车内容等。
如果想更灵活的操作cookie，可以把cookie的保存，读取，删除封装成方法来调用：
// 设置cookie
function setCookie(name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
// 获取cookie
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
// 删除cookie
function deleteCookie(name) {
setCookie(name, "", -1);
}
本地存储
随着HTML5的出现，Web存储API也随之诞生了。Web存储API提供了两种新的存储机制：本地存储和会话存储。本地存储与cookie非常相似，但它有一些重要的区别。
- 本地存储的数据不会在浏览器会话之间过期。这意味着即使你关闭了浏览器，本地存储的数据仍然存在。
- 本地存储的数据存储在浏览器的本地计算机上，而不是服务器上。这意味着本地存储的数据对服务器不可见。
- 本地存储的数据没有大小限制，而cookie的数据大小限制为4KB。
本地存储非常适合存储一些不敏感的数据，例如用户的登录状态、购物车内容、用户设置等。
本地存储的使用
使用本地存储非常简单。首先，你需要创建一个存储对象。你可以使用以下代码来创建一个存储对象：
var storage = window.localStorage;
然后，你可以使用以下代码来存储数据：
storage.setItem('key', 'value');
你可以使用以下代码来获取数据：
var value = storage.getItem('key');
你也可以使用以下代码来删除数据：
storage.removeItem('key');
本地存储的局限性
本地存储也有其局限性。本地存储的数据对服务器不可见，这可能会导致一些问题。例如，如果你使用本地存储来存储用户的登录状态，那么当用户在其他设备上登录时，他将无法访问自己的账户。
此外，本地存储的数据没有大小限制，这可能会导致浏览器崩溃。因此，在使用本地存储时，你需要注意数据的大小。
如何克服本地存储的局限性
有几种方法可以克服本地存储的局限性。一种方法是使用会话存储。会话存储与本地存储非常相似，但它有一些重要的区别。
- 会话存储的数据只在当前浏览器会话中存在。这意味着当用户关闭浏览器时，会话存储的数据将被删除。
- 会话存储的数据存储在浏览器的内存中，而不是本地计算机上。这意味着会话存储的数据对服务器可见。
会话存储非常适合存储一些敏感的数据，例如用户的信用卡信息、密码等。
另一种方法是使用IndexedDB。IndexedDB是一种低级别的API，它允许你存储和检索大量的数据。IndexedDB的数据存储在浏览器的本地计算机上，但它对服务器可见。
IndexedDB非常适合存储一些需要经常访问的大量数据，例如离线数据、游戏数据等。
