迹忆客 专注技术分享

我们的动机是了解会话并在 JavaScript 中设置会话变量。会话是服务器端存储的一部分，根据每个用户的唯一 ID 存储和访问数据。

例如，每当用户与网站交互时，它都会为该特定用户创建一个新的会话对象，并为他们分配一个 cookie。

每当用户再次从确切的客户端请求并发送到服务器以进一步处理和更新已存储的会话信息时，都会检查此 cookie。一旦用户清除 cookie，会话就会被清除。

你可能有一个问题，为什么使用会话很重要？

无状态 HTTP 协议不跟踪有关响应和请求的任何信息，这意味着一个用户（同一用户）的多个请求之间没有关系。会话用于解决此问题。

例如，我们有一个包含多个页面的表单。第 1 页、第 2 页和第 3 页分别是关于个人信息、教育详细信息和家庭信息的信息。

只有在用户填写完所有三个页面后，才能提交申请。在这种情况下，我们可能需要将第 1 和第 2 页提交的数据存储到会话中。

一旦用户提交了第 3 页，我们就可以从 HTTP 请求中获取该第 3 页，并从会话中获取剩余的第 1 和第 2 页。这就是会话的使用方式。

现在我们了解会话并知道服务器维护它们。使用 JavaScript 直接分配会话值是不可能的，但我们（作为 Web 开发人员）希望在本地使用会话存储来保存、检索、更新数据。

我们可以使用 localStorage 和 sessionStorage。

JavaScript 中的 localStorage 与 sessionStorage

localStorage 对象允许在浏览器中以键值对的形式存储数据而不会过期。即使在关闭标签页或浏览器之后，数据也可用于即将到来的会话（未来会话）。

sessionStorage 对象类似于 localStorage，但它只存储一个会话的数据。关闭或刷新标签页/浏览器时，数据会丢失。

以下是两者之间的简要比较，但你可以在此处找到更多相关信息。

使用 JavaScript 在 localStorage 和 sessionStorage 中设置变量

在 localStorage 和 sessionStorage 中存储和检索数据的方法相同。下面列出了这些方法。

切勿使用这些存储机制来存储机密信息。

localStorage 的 JavaScript 代码练习：

localStorage.setItem('fname','Bob');
localStorage.setItem('lname','Thomas');

console.log(localStorage.getItem('fname'));
console.log(localStorage.getItem('lname'));

//returns null
console.log(localStorage.getItem('firstname'));

//removes the item with key and value
localStorage.removeItem('fname');
//clears the entire storage
localStorage.clear()

sessionStorage 的 JavaScript 代码练习：

sessionStorage.setItem('fname','Bob');
sessionStorage.setItem('lname','Thomas');

console.log(sessionStorage.getItem('fname'));
console.log(sessionStorage.getItem('lname'));

//returns null
console.log(sessionStorage.getItem('firstname'));

//removes the item with key and value
sessionStorage.removeItem('fname');
//clears the entire storage
sessionStorage.clear()