Storan tempatan dan storan sesi dalam JavaScript

Andaikan anda sedang mencipta aplikasi web di mana pengguna boleh menggunakan media seperti teks atau imej. Anda mahu membenarkan mereka menulis beberapa teks yang boleh diakses walaupun selepas muat semula halaman atau penyemak imbas dimulakan semula. Sebelum API Penyimpanan Web, anda perlu menyimpan maklumat pada bahagian belakang dan muat semula pada bahagian pelanggan apabila diperlukan. Jika anda ingin menyampaikan maklumat merentas penyemak imbas atau peranti, ini masih cara yang perlu dilakukan.

Walau bagaimanapun, jika anda mahu maklumat yang dikekalkan merentas penyegaran halaman atau penyemak imbas dimulakan semula hanya boleh diakses pada penyemak imbas yang sama, maka API Storan Web ialah alat yang lebih sesuai.

Terdapat dua jenis pelaksanaan storan web, dipanggil localStorage dan sessionStorage. Seperti yang mungkin anda duga daripada namanya, sessionStorage mengekalkan maklumat untuk satu sesi, manakala localStorage mengekalkan data anda walaupun selepas anda memulakan semula penyemak imbas anda. 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 中所有键的值。

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

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

Dalam tutorial ini, anda akan mempelajari semua asas API Storan Web dan anda akan memahami cara memanfaatkan storan tempatan dan storan sesi untuk kelebihan kami. 🎜

Perbezaan antara storan setempat dan storan sesi

🎜Sebelum kita mendalami API, mari kita fahami perbezaan asas antara storan tempatan dan storan sesi. 🎜

1. localStorage tidak tamat tempoh walaupun penyemak imbas dimulakan semula, manakala sessionStorage hanya bertahan sehingga halaman dimuat semula.
2. localStorage dikongsi antara berbilang tab dan tetingkap dengan asal yang sama. Sebaliknya, sessionStorage akan berbeza untuk setiap tab yang memuatkan halaman web yang sama.

🎜Satu halaman web atau dokumen boleh mempunyai objek localStorage dan sessionStoragenya sendiri. Walau bagaimanapun, mereka akan bebas antara satu sama lain. 🎜

Kaedah dan sifat storan web yang tersedia

🎜localStorage dan sessionStorage mempunyai lima kaedah yang tersedia. 🎜 🎜Anda boleh menggunakan kaedah setItem(key, value) untuk menyimpan beberapa maklumat dalam bentuk pasangan kunci/nilai dalam objek storan. Jika kunci sudah wujud, kaedah ini akan mengemas kini nilainya. Perlu diingat bahawa kaedah ini memerlukan kedua-dua kunci dan nilai untuk menjadi rentetan. 🎜 🎜Anda boleh menggunakan kaedah getItem(key) untuk mendapatkan semula maklumat yang disimpan untuk kunci tertentu. Jika kunci yang diluluskan tidak wujud, kaedah ini akan mengembalikan null. 🎜 🎜Andaikan anda ingin memadamkan beberapa maklumat daripada localStorage atau sessionStorage. Dalam kes ini, anda boleh menggunakan kaedah removeItem(key) dan lulus nama kunci yang berkaitan untuk mengalih keluar kunci dan nilainya daripada storan. 🎜 🎜Anda juga boleh menggunakan kaedah clear() untuk mengosongkan semua kekunci sekaligus dan bukannya memadamnya satu demi satu daripada storan. 🎜 🎜Terdapat juga kaedah key(index) yang menerima integer sebagai indeks kunci dan mengembalikan nama kunci pada indeks khusus tersebut. Perkara penting yang perlu diingat di sini ialah susunan kunci ditentukan oleh ejen pengguna. 🎜 🎜Akhir sekali, terdapat sifat length yang boleh anda gunakan untuk mendapatkan bilangan item data yang disimpan dalam objek storan tertentu. 🎜 🎜Anda boleh menggunakan atribut length dengan kaedah key() dan kaedah getItem() untuk mengakses localStorage atau Nilai semua kunci dalam sessionStorage. 🎜 🎜Berikut adalah beberapa contoh penggunaan semua kaedah ini: 🎜

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);
});

Aplikasi praktikal storan setempat

🎜Mari kita lakukan sesuatu yang praktikal dengan semua pengetahuan yang kita perolehi. Kami akan mencipta aplikasi lukisan mudah di mana pengguna boleh menyimpan data dalam storan tempatan untuk mendapatkan semula masa hadapan. 🎜 🎜Apl lukisan kami akan menjadi sangat mudah. Kami akan mempunyai kanvas di mana pengguna boleh melukis bulatan sepusat jejari rawak. Nilai minimum dan maksimum jejari akan ditentukan oleh medan input yang mereka isi. Kami juga akan mempunyai butang untuk mengosongkan kanvas setelah kami melukis terlalu banyak bulatan. Ini adalah tanda kami: 🎜

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);
});

🎜Kami akan menyimpan tiga maklumat dalam storan setempat: jejari minimum, jejari maksimum dan keadaan kanvas. Ingat bahawa storan tempatan hanya boleh menyimpan maklumat sebagai rentetan. Nilai medan input boleh ditukar secara automatik kepada rentetan. Walau bagaimanapun, kita perlu mendapatkan status kanvas sebagai rentetan menggunakan kaedah toDataURL(). Kaedah ini mengembalikan rentetan yang mengandungi URL data yang diminta. 🎜 🎜Kami akan melampirkan pendengar acara pada semua elemen pada halaman: pendengar acara mousedown kanvas, pendengar acara change elemen input dan klik butang > pendengar acara. Mari kita mulakan dengan beberapa kod permulaan dan pendengar acara untuk medan borang. 🎜

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

Atas ialah kandungan terperinci Storan tempatan dan storan sesi dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!