JavaScript中的本地存储和会话存储

假设您正在创建一个网络应用程序，用户可以在其中使用文本或图像等媒体。您希望允许他们编写一些即使在页面刷新或浏览器重新启动后也可以访问的文本。在 Web Storage API 出现之前，您必须将信息存储在后端，并在需要时在客户端重新加载。如果您希望跨浏览器或设备提供信息，这仍然是可行的方法。

但是，如果您希望在页面刷新或浏览器重新启动时保留的信息只能在同一浏览器上访问，那么 Web Storage API 是一个更合适的工具。

有两种类型的Web存储实现，称为localStorage和sessionStorage。正如您可能从名称中猜到的那样，sessionStorage 会保留单个会话的信息，而 localStorage 即使在您重新启动浏览器后也会保留您的数据。

在本教程中，您将学习 Web Storage API 的所有基础知识，并且您将了解如何利用本地存储和会话存储来发挥我们的优势。

本地存储和会话存储之间的区别

在深入研究 API 之前，我们先了解一下本地存储和会话存储之间的基本区别。

1. localStorage 即使浏览器重新启动也不会过期，而 sessionStorage 仅持续到页面刷新。
2. localStorage 在具有相同来源的多个选项卡和窗口之间共享。另一方面，对于加载相同网页的每个选项卡，sessionStorage 将有所不同。

单个网页或文档可以拥有自己的 localStorage 和 sessionStorage 对象。但是，它们将相互独立。

可用的 Web 存储方法和属性

localStorage 和 sessionStorage 有五种可用方法。

您可以使用 setItem(key, value) 方法将一些信息以键/值对的形式存储在存储对象中。如果键已经存在，此方法将更新其值。请记住，此方法要求键和值都是字符串。

您可以使用 getItem(key) 方法来检索为特定密钥存储的信息。如果传递的密钥不存在，该方法将返回 null。

假设您要从 localStorage 或 sessionStorage 中删除一些信息。在这种情况下，您可以使用 removeItem(key) 方法并传递相关的键名称，以便从存储中删除键及其值。

您还可以使用 clear() 方法一次清除所有密钥，而不是一次从存储中删除一个密钥。

还有一个 key(index) 方法，它接受一个整数作为键索引，并返回该特定索引处的键名称。这里要记住的重要一点是键的顺序是由用户代理定义的。

最后，有一个 length 属性，您可以使用它来获取存储在给定存储对象中的数据项的数量。

您可以将 length 属性与 key() 方法和 getItem() 方法结合使用来访问 localStorage 或 sessionStorage 属性与 key() 方法和 getItem() 方法结合使用来访问 localStorage 或 sessionStorage 中所有键的值。

以下是使用所有这些方法的一些示例：

/* Save some key-value pairs */
localStorage.setItem("artist", "Monty Shokeen");
localStorage.setItem("website", "tutsplus.com");
localStorage.setItem("font", "Righteous");
localStorage.setItem("stroke_width", "4");
localStorage.setItem("color", "#FF5722");

/* Access stored values */
console.log(localStorage.getItem("color"));
// Outputs: #FF5722

console.log(localStorage.getItem("stroke_width"));
// Outputs: 4

/* Iterate over keys */
for (let i = 0; i < localStorage.length; i++) {
  console.log(`${localStorage.key(i)} : ${localStorage.getItem(localStorage.key(i))}`);
}
/*
stroke_width : 4
font : Righteous
website : tutsplus.com
color : #FF5722
artist : Monty Shokeen
*/

/* Removing keys from storage */
localStorage.removeItem("website"); 
localStorage.getItem("website"); 
// Outputs: null

本地存储的实际应用

让我们用我们所获得的所有知识来做一些实际的事情。我们将创建一个简单的绘图应用程序，用户可以将数据保存在本地存储中以供将来检索。

我们的绘图应用程序将非常简单。我们将有一个画布，用户可以在其中绘制随机半径的同心圆。半径的最小值和最大值将由它们填充的输入字段确定。一旦我们绘制了太多圆圈，我们还将有一个按钮来清除画布。这是我们的标记：

<canvas id="canvas" width="810" height="400"></canvas>
<form>
  <label for="min-rad">Min. Radius</label>
  <input type="number" name="min-rad" id="min-rad" min="4"></input>
  <br>
  <label for="max-rad">Max. Radius</label>
  <input type="number" name="max-rad" id="max-rad" min="20"></input>
  <br>
  <button type="button" id="clear">Clear Canvas</button>
</form>

我们将在本地存储中存储三项信息：最小半径、最大半径和画布的状态。请记住，本地存储只能将信息存储为字符串。输入字段的值可以自动转换为字符串。但是，我们需要使用 toDataURL() 方法以字符串形式获取画布的状态。此方法将返回一个包含所请求数据 URL 的字符串。

我们将向网页上的所有元素附加事件侦听器：画布的 mousedown 事件侦听器、输入元素的 change 事件侦听器以及按钮的 click 事件侦听器。让我们从表单字段的一些初始化代码和事件侦听器开始。

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

const minElem = document.querySelector("input#min-rad");
const maxElem = document.querySelector("input#max-rad");
const clearBtn = document.querySelector("button#clear");

let min_radius = 10;
let max_radius = 30;

minElem.addEventListener("change", function(event) {
  min_radius = parseInt(event.target.value);
  localStorage.setItem("min-radius", min_radius);
});

maxElem.addEventListener("change", function(event) {
  max_radius = parseInt(event.target.value);
  localStorage.setItem("max-radius", max_radius);
});

clearBtn.addEventListener("click", function(event) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  let image_data = canvas.toDataURL();
  localStorage.setItem("image-data", image_data);
});

默认情况下，我们将最小和最大半径值分别设置为 10 和 30 像素。最小和最大半径输入字段的更改事件侦听器将解析输入的值，然后将这些值存储在本地存储中。

在按钮的单击事件侦听器回调中，我们首先清除画布，然后使用 toDataUrl() 方法将此清除状态保存到本地存储。

这是在画布上侦听 mousedown 事件的代码。

canvas.addEventListener('mousedown', function(event) {
    const canvas_rect = event.target.getBoundingClientRect();
    const pos_x = event.clientX - canvas_rect.left;
    const pos_y = event.clientY - canvas_rect.top;
  
    for(let i = 0; i < 10; i++) {
      let radius = min_radius + Math.floor(Math.random()*(max_radius - min_radius));
      ctx.beginPath();
      ctx.arc(pos_x, pos_y, radius, 0, 2 * Math.PI);
      ctx.stroke();
    }
  
    let image_data = canvas.toDataURL();
    localStorage.setItem("image-data", image_data);
});

让我们来分解一下。我们首先计算用户在画布上单击的确切位置。这是通过从单击位置的 x 坐标减去画布边界矩形的 left 属性的值来确定的。我们做同样的事情来获取点击的垂直位置。

之后，我们创建一个 for 循环，在画布上绘制十个同心圆。半径设置为受最小和最大约束的随机值。最后，就像按钮的点击监听器一样，我们将画布状态保存在本地存储中。每次点击都会发生这种情况，以便我们能够及时了解最新的画布状态。

现在我们唯一要做的就是从本地存储中恢复值以供重新加载或重新启动时使用。我们使用以下代码来完成此操作：

window.addEventListener("DOMContentLoaded", (event) => {
  if (localStorage.getItem("image-data")) {
    var img = new Image();
    img.onload = function () {
      ctx.drawImage(img, 0, 0);
    };
    img.src = localStorage.getItem("image-data");
  }

  if (localStorage.getItem("min-radius")) {
    min_radius = parseInt(localStorage.getItem("min-radius"));
  }

  if (localStorage.getItem("max-radius")) {
    max_radius = parseInt(localStorage.getItem("max-radius"));
  }

  minElem.value = min_radius;
  maxElem.value = max_radius;
});

这里最复杂的部分是将图像数据从本地存储恢复到画布。为此，我们首先创建 HTMLImageElement 的新实例，然后侦听其 onload 事件，以便在画布上绘制加载的图像。

以下 CodePen 演示将向您展示我们的绘图应用程序的实际运行情况。首先尝试单击画布绘制一些圆圈或将半径设置为您喜欢的值。

现在，我们在教程中使用localStorage，这意味着即使浏览器重新启动我们的数据也将是安全的。您可以尝试将其替换为 sessionStorage 以仅在页面刷新期间保留信息。

最终想法

在本教程中，我们介绍了 JavaScript 中 localStorage 和 sessionStorage 的基础知识。您现在应该能够使用 Web Storage API 在浏览器存储中存储和检索信息。正如我们在此处创建绘图应用程序时看到的那样，该 API 有很多应用程序。您还可以使用它在本地文本编辑器中实现内容保存功能。

以上是JavaScript中的本地存储和会话存储的详细内容。更多信息请关注PHP中文网其他相关文章！