了解 Javascript 中的本地存储和 Cookie

Question

我的页面上有一个表单，其中包含文本框、单选按钮和下拉菜单，用于询问有关学生的问题。从这些选项中选择的选项稍后将用于制作包含每个学生内容的 div。我的指示说将列表保存到本地存储。我对这到底意味着什么感到困惑。我试着查了一下，饼干不断出现。我认为这是两件不同的事情。我对本地存储的概念感到困惑。我在 Google 和 Stack 上搜索过这个内容，并阅读了我能找到的与这些主题相关的内容。我认为我需要以简单的方式解释这一点，而不是阅读教科书定义或人们提出的有关 cookie 和本地存储的代码问题的答案。有人可以解释一下这两个主题吗？Cookie 和本地存储是同一件事吗？我不确定其他语言是否有所不同，但我正在使用JavaScript。

Answer 1

localStorage是浏览器提供的API，允许您读取和写入数据。您可以将其想象为一个大型 JavaScript 对象，在不同的键下存储数据值。使用它很容易：（localStorage.setItem(key, value)对于某些键和值，例如localStorage.setItem('test', 23)）写入值并localStorage.getItem(key)读取/访问该值。

Cookie 是通过 API 访问的document.cookie。document.cookie还使用键和值对（cookie）来存储数据；然而，读取和写入cookie的方法是不同的。要创建新的 cookie，您需要输入document.cookie = "key=value"（对于某些键和值，例如document.cookie = "test=23"）。要查看所有 cookie，请输入document.cookie，这会将所有 cookie 吐出为一串键和值，并用分号分隔（例如"test=23; someOtherKey=59"）。不幸的是，这使得读取 cookie 值比使用 ; 更困难一些localStorage。获取单个键的值的最简单方法是使用正则表达式，这是一种用于匹配文本的特定模式。

就如何使用它们而言，它们的相似之处在于它们都用于存储数据。但cookie主要是随页面一起从服务器发送到浏览器的；localStorage相比之下，只能通过浏览器中的 JavaScript 代码访问。

希望这可以帮助！

Answer 2

Cookie 和本地存储不是同一件事。

饼干

Cookie 是包含对网站有用的信息的小文件，例如密码、偏好设置、浏览器、IP 地址、访问日期和时间等。每次用户加载网站时，浏览器都会将 Cookie 发送回服务器通知网站用户之前的活动。Cookie 具有由其创建者定义的特定生命周期，并且在固定的时间周期后过期。

本地存储

localStorage 属性允许您访问文档来源的存储对象；存储的数据跨浏览器会话保存。这意味着在您将其删除之前它不会被清除。换句话说，localStorage 没有过期时间。

添加数据到localStorage

localStorage.setItem('myCat', 'Tom');

除去项目

localStorage.removeItem('myCat');

删除所有项目

localStorage.clear();

另外，还有一个东西叫做sessionStorage。这与 localStorage 相同，但数据仅存储到浏览器会话关闭为止。