JavaScript の LocalStorage と SessionStorage

5174 ワード
sessionstorage webstorageapi localstorage テキストリンク
Web ストレージは、習得が容易でありながら非常に強力な概念です.ダークモードとライトモードを備えた多くの Web サイトを見たことがあるかもしれません.ウェブサイトをリロードすると、モードを保存するためにデータベースを使用していませんが、モードは同じままです.これは、Web ストレージを使用して可能です.
さまざまな Web ページで同じデータを使用できる場合でも、コードのどの部分でもデータにアクセスできます. Web ストレージは、データをブラウザに保存するだけです.これが、Web サイトのテーマ (暗い/明るい) が Web サイトの複数のページで同じままである方法です.このデータは、キーと値のペアの DOMString の形式でブラウザーに保存されます.
Web ストレージには 2 つのタイプがあり、有効期限を変えることができます
  • セッション ストレージ
  • ローカルストレージ

    • セッション ストレージ:



    セッション ストレージでは、データは 1 つのセッションに対して保存されます.ユーザーが新しいタブを開くと、ブラウザーは新しいセッションを作成し、ユーザーがブラウザーのタブを閉じると、sessionStorage 内のデータが削除されます.
  • データを sessionStorage に保存するには

    • sessionStorage.setItem('myKey', 'myValue');
// or 
sessionStorage.myKey = "myValue";
// or
sessionStorage['myKey'] = "myValue";

  • sessionStorage からデータを取得するには

    • sessionStorage.getItem('myKey');
// or
sessionStorage['myKey'];
// or
sessionStorage.myKey;
// Output: 'myValue'

  • sessionStorage から特定のデータを消去するには

    • sessionStorage.removeItem('myKey')

  • sessionStorage からすべてのデータを消去するには

    • sessionStorage.clear()

    ローカルストレージ：



    ローカル ストレージには有効期限がありません.複数回のセッションにご利用いただけます.データは、手動で削除するまで localStorage に残ります.ローカル ストレージは、Web ページにテーマ (ダーク/ライト/その他) を保存したり、メモ アプリにメモを保存したりするためによく使用されます.
    localStorage の構文は、sessionStorage の構文とよく似ています.
  • データを localStorage に保存するには

    • localStorage.setItem('myKey', 'myValue');
// or 
localStorage.myKey = "myValue";
// or
localStorage['myKey'] = "myValue";

  • localStorage からデータを取得するには

    • localStorage.getItem('myKey');
// or
localStorage['myKey'];
// or
localStorage.myKey;
// Output: 'myValue'

  • sessionStorage から特定のデータを消去するには

    • localStorage.removeItem('myKey')

  • sessionStorage からすべてのデータを消去するには

    • localStorage.clear()

    localStorage について学ぶための簡単なカウンターをコーディングしましょう



    カウントを localStorage に格納します.
    ページを更新したり、タブを再度開いたりすると、カウンターは 0 から開始されません.localStorage に保存されている最後の値が使用されます.

    HTML



    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Simple Counter</title>
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <main>
      <div class="counter">
        <span class="dec" onclick="updateCounter('INC')">&#171;</span>
        <span class="value">0</span>
        <span class="inc" onclick="updateCounter('DEC')">&#187;</span>
      </div>
    </main>
    <script src="./index.js"></script>
  </body>
</html>

    CSS



    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

main {
  font-family: "Courier New", Courier, monospace;
}

.counter {
  width: max-content;
  margin: 10vh auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 16px;
}
.counter > span {
  padding: 0.5em;
}

.inc,
.dec {
  cursor: pointer;
  font-size: 3em;
  font-weight: 700;
  transform: rotate(90deg);
  color: #0b0c64;
}

.inc:hover,
.dec:hover {
  opacity: 0.8;
}

.value {
  font-size: 3em;
  min-width: 200px;
  min-height: 200px;
  background: #368bec;
  color: #fff;
  border-radius: 1em;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0.5em 0 #00000073;
}

    JavaScript



    const [inc, value, dec] = document.querySelector(".counter").children;

// Check counter exist in localStorage
// if not then initialise it to zero
if (!localStorage.counter) localStorage.counter = 0;

value.innerHTML = localStorage.counter;

const updateCounter = (action) => {
  switch (action) {
    case "INC":
      // since localStorage stores in DOMString
      // We have to convert it in number
      localStorage.counter = Number(localStorage.counter) + 1;
      break;
    case "DEC":
      localStorage.counter = Number(localStorage.counter) - 1;
      break;
  }
  value.innerHTML = localStorage.counter;
};
    change numberについて
    ES 6のPromise説明async/awaitの使用