Lokaler Speicher und Sitzungsspeicher in JavaScript

Angenommen, Sie erstellen eine Webanwendung, in der Benutzer Medien wie Text oder Bilder konsumieren können. Sie möchten ihnen ermöglichen, Text zu schreiben, der auch nach einer Seitenaktualisierung oder einem Browser-Neustart zugänglich ist. Vor der Web Storage API mussten Sie Informationen im Backend speichern und bei Bedarf auf der Clientseite neu laden. Wenn Sie Informationen browser- oder geräteübergreifend bereitstellen möchten, ist dies immer noch der richtige Weg.

Wenn Sie jedoch möchten, dass Informationen, die über Seitenaktualisierungen oder Browser-Neustarts hinweg erhalten bleiben, nur im selben Browser zugänglich sind, ist die Web Storage API das geeignetere Tool.

Es gibt zwei Arten von Webspeicher-Implementierungen namens localStorage和sessionStorage。正如您可能从名称中猜到的那样，sessionStorage 会保留单个会话的信息，而 localStorage, die Ihre Daten auch nach einem Neustart Ihres Browsers behalten.

In diesem Tutorial lernen Sie alle Grundlagen der Web Storage API kennen und verstehen, wie Sie lokalen Speicher und Sitzungsspeicher zu unserem Vorteil nutzen können.

Unterschied zwischen lokalem Speicher und Sitzungsspeicher

Bevor wir uns mit der API befassen, wollen wir die grundlegenden Unterschiede zwischen lokalem Speicher und Sitzungsspeicher verstehen.

1. localStorage 即使浏览器重新启动也不会过期，而 sessionStorage Hält nur so lange an, bis die Seite aktualisiert wird.
2. localStorage 在具有相同来源的多个选项卡和窗口之间共享。另一方面，对于加载相同网页的每个选项卡，sessionStorage Es wird anders sein.

Eine einzelne Webseite oder ein einzelnes Dokument kann ein eigenes localStorage 和 sessionStorage Objekt haben. Sie werden jedoch unabhängig voneinander sein.

Verfügbare Webspeichermethoden und -eigenschaften

localStorage 和 sessionStorage Es stehen fünf Methoden zur Verfügung.

Mit der setItem(key, value)-Methode können Sie einige Informationen in Form von Schlüssel/Wert-Paaren in einem Speicherobjekt speichern. Wenn der Schlüssel bereits vorhanden ist, aktualisiert diese Methode seinen Wert. Beachten Sie, dass für diese Methode sowohl Schlüssel als auch Werte Zeichenfolgen sein müssen.

Sie können getItem(key) 方法来检索为特定密钥存储的信息。如果传递的密钥不存在，该方法将返回 null verwenden.

Angenommen, Sie möchten den Schlüssel und seinen Wert aus der localStorage 或 sessionStorage 中删除一些信息。在这种情况下，您可以使用 removeItem(key)-Methode entfernen und den entsprechenden Schlüsselnamen übergeben.

Sie können die clear()-Methode auch verwenden, um alle Schlüssel auf einmal zu löschen, anstatt sie einzeln aus dem Speicher zu löschen.

Es gibt auch eine key(index)-Methode, die eine Ganzzahl als Schlüsselindex akzeptiert und den Schlüsselnamen an diesem spezifischen Index zurückgibt. Dabei ist es wichtig zu beachten, dass die Reihenfolge der Schlüssel vom Benutzeragenten definiert wird.

Schließlich gibt es eine length-Eigenschaft, mit der Sie die Anzahl der in einem bestimmten Speicherobjekt gespeicherten Datenelemente ermitteln können.

Sie können das Attribut length 属性与 key() 方法和 getItem() 方法结合使用来访问 localStorage 或 sessionStorage mit der Methode key() und der Methode getItem() verwenden, um auf localStorage oder sessionStorage zuzugreifen. Code> > Die Werte aller Schlüssel in .

Hier sind einige Beispiele für die Verwendung all dieser Methoden:

/* 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

Praktische Anwendungen der lokalen Speicherung

Lassen Sie uns mit all dem Wissen, das wir gewonnen haben, etwas Praktisches machen. Wir werden eine einfache Zeichenanwendung erstellen, mit der der Benutzer Daten im lokalen Speicher speichern kann, um sie später abzurufen.

Unsere Zeichen-App wird sehr einfach sein. Wir werden eine Leinwand haben, auf der der Benutzer konzentrische Kreise mit zufälligen Radien zeichnen kann. Die minimalen und maximalen Werte des Radius werden durch die von ihnen ausgefüllten Eingabefelder bestimmt. Wir werden auch eine Schaltfläche zum Löschen der Leinwand haben, wenn wir zu viele Kreise gezeichnet haben. Das ist unser Zeichen:

<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>

Wir speichern drei Informationen im lokalen Speicher: minimaler Radius, maximaler Radius und der Zustand der Leinwand. Denken Sie daran, dass der lokale Speicher Informationen nur als Zeichenfolgen speichern kann. Eingabefeldwerte können automatisch in Zeichenfolgen umgewandelt werden. Allerdings müssen wir den Status der Leinwand als String mithilfe der toDataURL()-Methode ermitteln. Diese Methode gibt einen String zurück, der die URL der angeforderten Daten enthält.

Wir werden allen Elementen auf der Seite einen Ereignis-Listener hinzufügen: den mousedown 事件侦听器、输入元素的 change 事件侦听器以及按钮的 click Ereignis-Listener der Leinwand. Beginnen wir mit etwas Initialisierungscode und Ereignis-Listenern für die Formularfelder.

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 有很多应用程序。您还可以使用它在本地文本编辑器中实现内容保存功能。

Das obige ist der detaillierte Inhalt vonLokaler Speicher und Sitzungsspeicher in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!