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 中所有鍵的值。

以下是使用所有這些方法的一些範例：

/* 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中文網其他相關文章！