📕Local Storage、Session Storage和Cache Storage之间的区别

嗨，大家好！这里是道长王jj~ 🎩🧙‍♂️

你知道什么是Cache Storage、Local Storage和Session Storage吗？它们都是一些可以在你的浏览器里保存信息的介质，但是它们有什么不同呢？🤔

HTML5让我们有了很多方法可以在浏览器里存储信息。以前，我们只有一个小小的Cache，它的空间不够用，而且很容易被删掉。😢现在，我们还有Local Storage和Session Storage，它们的空间更大，而且更安全。😊

Cache它可以帮我们快速加载网页，但是它也有很多问题。所以，现在我们来简单看看Local Storage和Session Storage，它们是怎么工作的，以及它们有什么优势。👇

💡Local Storage、Session Storage和Cache Storage的比较

❓localStorage存储在哪里？

Web 存储数据保存在 Google Chrome 中用户配置文件子目录中的 SQLite 文件中。这个文件在你的电脑上有一个特别的地方，你可以找到它。

🔎在 Windows 和 macOS 上，这个地方叫做

\AppData\Local\Google\Chrome\User Data\Default\Local

/Library/Application Support/Google/Chrome/Default/Local Storage

❓window.localStorage 是什么？

window 是一个代表网页窗口的东西，它有很多功能，其中一个就是 localStorage。localStorage 可以让你把一些信息保存在网页里，下次再打开网页的时候，还能看到这些信息。👍

setItem()

顾名思义，它可以让你把一些值存进 localStorage 里面。

const person = {
   
    name: "王JJ",
    location: "广东",
}

window.localStorage.setItem('user', JSON.stringify(person));

其中user是key，JSON.stringify(person)是value。

localStorage 只能存字符串。

如果你想存数组或对象，就是一些有顺序或结构的东西，你要先把它们变成字符串，才能存进去。👌

getItem()

getItem() 函数用于从 localStorage 中检索内容。它可以让你从 localStorage 里拿出你存的东西。用 getItem() 函数，你就可以看到你之前放在浏览器 localStorage 里的数据。

window.localStorage.getItem('user');

// “{“name”:”王JJ”,”location”:”广东”}”

这个值是一个字符串，如果你想用它，你要先把它变回对象。

JSON.parse(window.localStorage.getItem('user'));

removeItem()

removeItem() 函数就像一个垃圾桶，它可以让你把 localStorage 里不要的东西扔掉。

当给定键名称时，removeItem() 函数会把这个value和它的key一起扔掉（如果有的话）。这个方法只能用在有key的时候。

window.localStorage.removeItem('name');

clear()

如果你想把 localStorage 里的所有东西都清空，就用 clear() 函数。

这个方法不需要你告诉它任何东西，它会把这个域里存的所有记录都删掉。

window.localStorage.clear();

key()

key() 函数可以让你用一个数字或索引来找到一个key，这样你就可以知道 localStorage 里都有哪些key。

const KeyName = window.localStorage.key(index);

📌Session Storage

Session Storage是一种只在你浏览一个网页的时候才能用的存储方法。它可以让你把一些数据放在键值对中，这些数据通常是你在网站上做一些事情的时候需要的，比如填写一些表格。当你关掉这个网页或者去看网站上的其他东西的时候，会话存储里的数据就会消失。😱不过，localStorage就不一样，它会一直留在浏览器里，即使你关掉网页或者浏览器也没关系。😎

setItem(name, value)

你可以用这个代码存储名称/值对进 sessionStorage 里。

sessionStorage.setItem('mode','dark');

如果 sessionStorage 里已经有一个叫 mode 的key，那么 setItem() 函数会把它的值改成 dark。如果没有，那么它会新建一个东西叫 mode。

removeItem(name)

你可以用 removeItem() 方法把一个东西从 sessionStorage 里扔掉。比如说，你想扔掉 mode 这个东西，你就可以这样做：

sessionStorage.removeItem('mode');

getItem(name)

getItem() 函数可以让你用一个名字检索项目的值。比如说，你想找到 mode 这个东西的值，你就可以这样做：

const mode = sessionStorage.getItem('mode');
console.log(mode); // 'dark'

如果 sessionStorage 里没有叫 mode 的东西，那么 getItem() 方法会给你一个 null。

key (index)

如果你想看看 sessionStorage 里都有哪些东西，你可以按照这些步骤：

• 要找到 sessionStorage 里所有的名字，用 object.keys()。
• 要用名字来找到东西，并且一个一个地看，用 for…of。

代码是这样的：

let keys = Object.keys(sessionStorage);
for(let key of keys) {
   
  console.log(`${key}: ${sessionStorage.getItem(key)}`);
}

clear ()

当你关掉浏览器的标签页或窗口的时候，sessionStorage 里的数据就会自动消失。

而且，你也可以用 clear() 函数来手动清空 sessionStorage 里的所有数据。。

sessionStorage.clear();

📌Cookies Storage

在 HTML5 出现之前，cookie 是我们在浏览器里存数据的唯一方法。它可以让我们把一些客户端的数据保存起来，给网站的访客一个个性化的体验。这些数据会跟着请求一起来回传送，从客户端到服务器，再从服务器到客户端。所以，每次发出请求的时候，服务器和客户端都会互相分享数据。服务器可以用 cookie 的数据来给用户提供他们想要的内容。

我们可以用 JavaScript 来创建、修改或读取 cookie：document.cookie。为了防止一些安全问题，比如跨站点脚本攻击，我们有一个 HTTPOnly 的 cookie 设置，它可以让 JavaScript 不能访问 cookie。

cookie 有两种类型：会话 cookie 和持久 cookie。

Session Cookies

会话 cookie 没有设置 Expire 或 Max-Age 这些属性；所以，当浏览器关掉的时候，它们也会消失。

Persistent Cookies

持久 cookie 设置了 Expire 或 Max-Age 这些属性。这些属性会让 cookie 在一个特定的日期（Expire）或时间段（Max-Age）后过期，而不是跟着浏览器一起关掉。

❓怎么界定应该使用什么方式？

你要做什么样的应用程序，也会影响你选择哪种存储方法。比如说：

• 如果你想做一个移动应用程序，localStorage 是最好的，因为它可以在没有网的时候也能用。

• 如果你的应用程序只能在有网的时候用，而且没有用户界面来显示一些变化的数据，那么你应该用 cacheStorage。

• 如果你想让网站记住用户的一些信息，那么你应该用 sessionStorage，因为它会在用户关掉浏览器的时候清空。

🎉 你觉得怎么样？这篇文章可以给你带来帮助吗？当你处于这个阶段时，你发现什么对你帮助最大？如果你有任何疑问或者想进一步讨论相关话题，请随时发表评论分享您的想法，让其他人从中受益。🚀✨