subtitle

RaiseTechの各種コースをはじめとしたイロイロな学習の記録

Web Storage APIとは？

11月 07, 2021

Webストレージは、ブラウザにデータを保存するための仕組み。


ToDoアプリ作成において、リストを作成し、必要に応じてデータを削除することはできたが、F5などで画面をリロードすると、作成したデータが消えてしまう。

このため、作成したリストデータを、Webストレージに保存して、画面をリロードしても消えないようにする。


作業に入る前に、Webストレージについて、基本的な部分を押さえておく。



Webストレージの種類

  • ローカルストレージ
  • セッションストレージ


Webストレージは、ブラウザがもともと持っているストレージで、仕組みは2種類ある。

ローカルストレージ、セッションストレージは、どちらも「キーと値」のセットでブラウザにデータを保存するが、有効範囲や用途などが異なる。


ローカルストレージ

ローカルストレージは、ドメイン単位でデータを保存する。

ドメイン単位なので、同じドメインならウィンドウが異なっていても、データは保持できる。

データを保存できる期間は、消すまで。(保持され続ける)


セッションストレージ

セッションストレージは、ローカルストレージと異なり、ウィンドウやタブ単位でデータを保存する。

1回限りなので、ウィンドウやタブを閉じるとデータは消える。


ローカルストレージもセッションストレージも、データの上限は5MB。(クッキーは4KB)



クッキー(Cookie)とは？

Webブラウザの情報を持つという意味では、Cookieがあるが、クッキーとWebストレージの違いは何か？


Cookieは、Webサーバーがクライアント側に保存するファイルのこと。ファイルサイズは、上でも書いたように4KBと非常に小さい。(Webストレージの上限は5MB)

これだけ小さいファイルサイズであれば、Webサイトごとに異なるCookieが保存されていても、大した容量にはならない。


Webストレージは、クライアント側からWebブラウザにデータを保存し、そのデータにアクセスできるが、Cookieは基本的にはWebサーバー主導である。

例えば、Cookieの情報をどのように構成するか(内容とか有効期限とか)は、サーバー側で設定する。

クライアントが、Webサーバーに初めてアクセスするときに、Webサーバー側がクライアント側に、そのWebサーバー専用のCookieを作成する。

クライアントが2回目以降にWebサーバーにアクセスする際に、HTTPリクエストが発生するが、そのたびにCookieがWebサーバー側に送信される。(この仕組みによって、サーバーはクライアントが過去に使用していた情報を読み取ることができるようになる。)


買い物途中でブラウザを閉じても、次にそのサイトを訪問した時に、買い物かごの中に未購入の商品が入っているのは、このCookieのなせる業だ。



Webストレージ(ローカルストレージ)の仕組みを実装してみる

ざっくりと概要を学習したところで、使ってみる。

まずは、ローカルストレージの機能から。


やりたいこと

  • 入力したデータを、ボタンを押すことで確定して、表示させる(覚えるデータは1個だけ)
  • 画面をリロードしても覚えたデータが消えないようにする
  • ローカルストレージに保存したデータを消すボタンを作る


画面イメージ


HTMLを作成

上の見た目にするためのHTMLは、下記の通り。

今回は、CodeSandboxを使っているが、ローカルストレージを確認する場合は、staticテンプレートを使う。(vanillaテンプレートを使うと、画面リロードの部分が上手く動作確認できないので注意)


HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Test Strage Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <h1>Webストレージについて学ぶ</h1>
    <p>ローカルストレージに1つだけ記録するツール</p>
    <div id="input_are">
      <h2>Input</h2>
      <input class="input_text"/ type="text">
      <button class="input_submit" type="button">覚える</button>
    </div>
    <div id="output_area">
      <h2>Output</h2>
      <p class="output_list"></p>
    </div>
    <div id="delete_area">
      <button class="delete_submit" type="button">
        Webストレージ消去するボタン
      </button>
    </div>
    <script src="src/index.js"></script>
  </body>
</html>


動作確認用に、できるだけシンプルに。

入力エリア、出力エリア、ローカルストレージ消去ボタンエリアに分ける。


CSSを作る

このくらいだと、もはやCSSいらないくらいだけど、一応作っとく。


CSS

body {
  font-family: sans-serif;
}

.input_text {
  height: 1.5rem;
}

.input_submit {
  height: 2rem;
}

.delete_submit {
  height: 2rem;
}


JavaScriptを作成

ローカルストレージを扱うには、まずローカルストレージの準備。

const tStorage = localStorage;


入力したデータを「覚える」ボタンで確定した時に、そのデータをローカルストレージに保存する。

tStorage.setItem('store', tInput.value);


画面リロード時に、ローカルストレージに保存しておいたデータを取り出す。

const storedContent = tStorage.getItem('store');


ローカルストレージのデータは、削除しないと消えないので、削除ボタンを押されたときに、ローカルストレージのデータを消す。

tStorage.removeItem('store');


上記を踏まえたうえで、JavaScriptを書くとこうなる。


JavaScript

const tStorage = localStorage;

const tInput = document.getElementsByClassName('input_text')[0];
const tSubmit = document.getElementsByClassName('input_submit')[0];
const tOutput = document.getElementsByClassName('output_list')[0];
const tDelete = document.getElementsByClassName('delete_submit')[0];

tDelete.addEventListener('click', () => {
  // ローカルストレージの削除
  //  delete tStorage.store;　← こういう書き方もできる
  tStorage.removeItem('store');
  tOutput.textContent = 'Webストレージを削除しました';
});

tSubmit.addEventListener('click', () => {
  if (tInput.value === '') {
    window.alert('覚えるタスクを入力してください');
    return;
  }

  tOutput.textContent = tInput.value;
  // ローカルストレージに保存
  //  tStorage.store = tInput.value;　← こういう書き方もできる
  tStorage.setItem('store', tInput.value);
  tInput.value = '';
});

document.addEventListener('DOMContentLoaded', () => {
  if (tStorage.store !== undefined) {
    // ローカルストレージに保存してあるデータを戻す
    //  const storedContent = tStorage.store;　← こういう書き方もできる
    const storedContent = tStorage.getItem('store');
    tOutput.textContent = storedContent;
  } else {
    // tStorage.store = 'Webストレージ未登録';
    tStorage.setItem('store', 'Webストレージ未登録');
    tOutput.textContent = tStorage.store;
  }
});


こんな感じかな。

これでリロードしても、出力エリアの表示が保持される。


ここまでのアプリは、これで確認できる。

https://uqzl8.csb.app/



動作確認

入力項目を入力して、「覚える」ボタンを押すと、出力エリアに表示されるが、この時にローカルストレージにも同じ内容が保存されている。


F12キーでDevToolsを起動して、ApplicationタブのLocalStorageを確認すると、storeというキーに対して、Valueが保存されていることがわかる。

ローカルストレージに保存される内容は、リロードや、画面を閉じても消えない。


Webストレージを消去するボタンを押すと、ローカルストレージの内容を消去する作りにしてある。(削除と同時に、出力エリアに「Webストレージを削除しました」と表示させるようにしている。)


KeyとValueのセットも消えていることがわかる。


画面をリロードするタイミングで、ローカルストレージに値が保存されていなければ、ローカルストレージに「Webストレージ未登録」という文字列を保存するようにしてある。



リロードのタイミング

さてここで、リロードのタイミングであるが、リロードのタイミングは、addEventListenerで拾うことができる。


JavaScript

document.addEventListener('DOMContentLoaded', 実行したい関数);


DOMContentLoadedは、以前にDevToolsの使い方を調べたときに、出てきたやつ。

最初のHTMLの読み込みと解析が完了したタイミングのことである。

過去記事：


addEventListenerの第1引数にDOMContentLoadedを指定すると、リロードタイミングで第2引数の関数を実行してくれる。


DevToolsのSourcesタブでブレークを張っておくと、リロードタイミングで止まってくれるので、この関数が呼ばれていることがわかる。


CodeSandboxのvanillaテンプレートを使うと、なぜかここでブレークが止まらない(つまりリロードしてもここに来ない)ので、ローカルストレージの確認ができないので注意。

今は、staticのテンプレートを使っているので、問題なく動作するようだ。






































Tags: