JavaScript のローカル ストレージとセッション ストレージ

ユーザーがテキストや画像などのメディアを利用できる Web アプリケーションを作成しているとします。ページを更新したりブラウザを再起動した後でもアクセスできるテキストを書き込めるようにしたいと考えています。 Web Storage API が登場する前は、情報をバックエンドに保存し、必要に応じてクライアント側で再ロードする必要がありました。ブラウザーまたはデバイス間で情報を提供したい場合は、これがまだ有効な方法です。

ただし、ページを更新したりブラウザを再起動しても保持される情報に、同じブラウザ上でのみアクセスできるようにしたい場合は、Web Storage API の方が適切なツールです。

Web ストレージ実装には、localStorage と sessionStorage という 2 種類があります。名前から推測できるように、sessionStorage は単一セッションの情報を保持しますが、localStorage はブラウザを再起動した後でもデータを保持します。

このチュートリアルでは、Web Storage API の基本をすべて学習し、ローカル ストレージとセッション ストレージを有利に活用する方法を理解します。

ローカルストレージとセッションストレージの違い

API について詳しく説明する前に、ローカル ストレージとセッション ストレージの基本的な違いを理解しましょう。

1. localStorage はブラウザを再起動しても期限切れになりませんが、sessionStorage はページが更新されるまでのみ存続します。
2. localStorage 同じオリジンを持つ複数のタブとウィンドウ間で共有します。一方、sessionStorage は、同じ Web ページを読み込むタブごとに異なります。

個々の Web ページまたはドキュメントは、独自の localStorage および sessionStorage オブジェクトを持つことができます。ただし、それらは互いに独立しています。

利用可能なWebストレージのメソッドとプロパティ

localStorage と sessionStorage には 5 つのメソッドが使用できます。

setItem(key, value) メソッドを使用すると、一部の情報をキーと値のペアの形式でストレージ オブジェクトに保存できます。キーがすでに存在する場合、このメソッドはその値を更新します。このメソッドでは、キーと値の両方が文字列である必要があることに注意してください。

getItem(key)

メソッドを使用すると、特定のキーに保存されている情報を取得できます。渡されたキーが存在しない場合、メソッドは null を返します。

localStorage

または sessionStorage から何らかの情報を削除するとします。この場合、removeItem(key) メソッドを使用し、関連するキー名を渡すことで、キーとその値をストレージから削除できます。

clear()

メソッドを使用して、ストレージからキーを 1 つずつ削除する代わりに、すべてのキーを一度にクリアすることもできます。 整数をキー インデックスとして受け入れ、その特定のインデックスのキー名を返す

key(index)

メソッドもあります。ここで覚えておくべき重要なことは、キーの順序はユーザー エージェントによって定義されるということです。 最後に、指定されたストレージ オブジェクトに格納されているデータ項目の数を取得するために使用できる

length

プロパティがあります。

length

プロパティを key() メソッドおよび getItem() メソッドとともに使用して、localStorage または # にアクセスできます。 # #sessionStorage 内のすべてのキーの値。 これらのメソッドをすべて使用した例をいくつか示します: リーリー

ローカルストレージの実用化

これまで得た知識をすべて使って、実際的なことをしてみましょう。ユーザーが将来の検索のためにデータをローカル ストレージに保存できるシンプルな描画アプリケーションを作成します。

私たちの描画アプリケーションは非常にシンプルになります。ユーザーがランダムな半径の同心円を描くことができるキャンバスができます。半径の最小値と最大値は、入力フィールドによって決まります。円を描きすぎた場合にキャンバスをクリアするボタンもあります。これが私たちのマークです:

リーリー

最小半径、最大半径、キャンバスの状態という 3 つの情報をローカル ストレージに保存します。ローカル ストレージには情報を文字列としてのみ保存できることに注意してください。入力フィールドの値を自動的に文字列に変換できます。ただし、

toDataURL()

メソッドを使用して、キャンバスのステータスを文字列として取得する必要があります。このメソッドは、要求されたデータの URL を含む文字列を返します。

ページ上のすべての要素にイベント リスナーをアタッチします。キャンバスの mousedown

イベント リスナー、input 要素の

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 中国語 Web サイトの他の関連記事を参照してください。