JavaScript ローカル ストレージ

プログラミング 2023-07-01 12:53:58 訪問数: null

記事ディレクトリ

提示：以下是本篇文章正文内容，下面案例可供参考

序文

ローカルストレージ

インターネットの急速な発展に伴い、Web ベースのアプリケーションはますます一般的かつ複雑になり、さまざまなニーズを満たすために、大量のデータがローカルに保存されることがよくありますが、HTML5 仕様ではその解決策が提案されています。
これまでは、大量のデータをデータベースに保存し、サーバーから頻繁に取得して再利用することがあり、非常に面倒でした。また、一部の機能のデータはデータベースに保存する必要がありませんでした。

ローカルストレージ機能

  1. データはユーザーのブラウザに保存されます。
  2. データを失うことなく、セットアップ、読み取り、さらにはページの更新も簡単です。
  3. 大容量、sessionStorage約5M、localStorage約20M。
    5M を過小評価しないでください。数百万の単語を保存できます。
  4. 文字列のみを保存でき、オブジェクトは JSON.stringfy() エンコード後に保存できます。

1. 目標

  1. sessionStorage データの保存と取得を書き込むことができます
  2. localStorageデータの保存と取得が可能
  3. 2つの違いを見分けることができる

2. 主な学習内容

1. window.sessionStorage

1.1 sessionStorageの特徴

  1. ライフサイクルはブラウザ ウィンドウを閉じることです。
  2. 同じウィンドウ（ページ）上でデータを共有することができます。
  3. キーと値のペアの形式で保存されます。データをオブジェクト形式で保存したい場合は、JSON.stringify(value)を使用できます。

1.2 セッションストレージの例

1. データを保存する

sessionStorage.setItem(キー,値)

1.1 コード例:

<body>
  <input type="text">
  <button class="set">存储数据</button>
  
  <script>
  // 获取输入框和按钮元素
    var inp = document.querySelector('input')
    var set = document.querySelector('.set')
    给按钮注册绑定点击事件
    set.addEventListener('click', function() {
      
      
    // 获取输入框的值
      var val = inp.value
      // 存储到本地 setItem(key,value)形式
      sessionStorage.setItem('user',val)
    })
  </script>
</body>

1.2 画像の例:

保存されたデータの図の例:

ここに画像の説明を挿入実験するには、コンソールを開いてアプリケーションを見つけるか、「アプリケーション」→「セッションストレージ」または「セッションストレージスペース」を見つけます。
コンソールは中国語に翻訳されています。

その機能をテストすることも可能です-ライフサイクルはブラウザ ウィンドウを閉じることです。ページ ウィンドウを閉じない限り、ページ ウィンドウは常に存在し、ページを更新しても問題ありません。

ページを更新するサンプル画像:

ここに画像の説明を挿入

2. データを取得する

sessionStorage.getItem(キー)

2.1 コード例:

<body>
  <input type="text">
  <button class="set">存储数据</button>
  <button class="get">获取数据</button>
  <script>
    var inp = document.querySelector('input')
    var set = document.querySelector('.set')
    // 给按钮注册绑定点击事件
    set.addEventListener('click', function() {
      
      
    // 获取输入框的值
      var val = inp.value
      // 存储到本地 setItem(key,value)形式
      sessionStorage.setItem('user',val)
    })
    // 获取 获取数据按钮的元素
    var get = document.querySelector('.get')
    // 注册绑定事件
    get.addEventListener('click', function() {
      
      
    // 点击后打印输出获得的本地数据
      console.log(sessionStorage.getItem('user'))
    })
  </script>

2.2 画像の例:

ローカル ストレージ データ マップを取得します。

ここに画像の説明を挿入

3. データを削除する

sessionStorage.removeItem(キー)

3.1 コード例:

<body>
  <input type="text">
  <button class="remove">删除数据</button>
  <script>
    var inp = document.querySelector('input')
    // 给按钮注册绑定点击事件
    var remove = document.querySelector('.remove')
    remove.addEventListener('click', function() {
      
      
    // 删除本地数据
      sessionStorage.removeItem('user')
    })
  </script>
</body>

3.2 画像の例:

ここに画像の説明を挿入

4. すべてのデータを消去します

sessionStorage.clear()

4.1 コード例:

<body>
  <input type="text">
  <button class="set">存储数据</button>
  <button class="clear">清空所有数据</button>

  <script>
    var inp = document.querySelector('input')
    var set = document.querySelector('.set')
    // 给按钮注册绑定点击事件
    set.addEventListener('click', function() {
      
      
    // 获取输入框的值
      var val = inp.value
      // 存储到本地 setItem(key,value)形式
      sessionStorage.setItem('user',val)
      sessionStorage.setItem('pwd',val)
    })
    // 清空所有数据
    var clear = document.querySelector('.clear')
    clear.addEventListener('click', function() {
      
      
    // 清空所有数据
      sessionStorage.clear()
    })
  </script>
</body>

4.2 画像の例:

ここに画像の説明を挿入

1.3 sessionStorage の完全なサンプルコード:

<!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>08-本地存储sesstionStorage</title>
</head>
<body>
  <input type="text">
  <button class="set">存储数据</button>
  <button class="get">获取数据</button>
  <button class="remove">删除数据</button>
  <button class="clear">清空所有数据</button>

  <script>
    var inp = document.querySelector('input')
    var set = document.querySelector('.set')
    // 给按钮注册绑定点击事件
    set.addEventListener('click', function() {
      
      
    // 获取输入框的值
      var val = inp.value
      // 存储到本地 setItem(key,value)形式
      sessionStorage.setItem('user',val)
      sessionStorage.setItem('pwd',val)
    })
    // 获取数据
    var get = document.querySelector('.get')
    get.addEventListener('click', function() {
      
      
      console.log(sessionStorage.getItem('user'))
    })
    // 删除数据
    var remove = document.querySelector('.remove')
    remove.addEventListener('click', function() {
      
      
      sessionStorage.removeItem('user')
    })
    // 清空所有数据
    var clear = document.querySelector('.clear')
    clear.addEventListener('click', function() {
      
      
      sessionStorage.clear()
    })
  </script>
</body>
</html>

2. window.localStorage

2.1 localStorageの特徴

  1. 寿命は永久です、手動で削除しない限り、最後のページも存在します。
  2. できるマルチウィンドウ（ページ）共有(同じブラウザで共有できます)。
  3. これは、キーと値のペアの形式で保存および使用されます。データをオブジェクト形式で保存したい場合は、JSON.stringify(value)を使用できます。

2.2 sessionStorageの例

1. データを保存する

localStorage.setItem(キー,値)

1.1 コード例:

<body>
  <input type="text">
  <button class="set">存储数据</button>
  <script> 
    var inp = document.querySelector('input')
    var set = document.querySelector('.set')
    // 给按钮注册绑定点击事件
    set.addEventListener('click', function() {
      
      
    // 获取输入框的值
      var val = inp.value
      // 存储到本地 setItem(key,value)形式
      localStorage.setItem('user',val)
      localStorage.setItem('pwd',val)
    })
  </script>
</body>

1.2 画像の例:

保存されたデータの図の例:
ここに画像の説明を挿入
ここでは、localStorage の特性を実験できます。寿命は永久です、手動で削除しない限り、最後のページも存在します。

このページを閉じた後に再度開くサンプル画像:

ここに画像の説明を挿入この図は少し長いですが、この図を読むと、手動で削除しない限り、localStorage のライフサイクルが常に存在することがわかります。

2. データを取得する

localStorage.getItem(キー)

2.1 コード例:

<body>
  <input type="text">
  <button class="set">存储数据</button>
  <button class="get">获取数据</button>
  <script> 
    var inp = document.querySelector('input')
    var set = document.querySelector('.set')
    // 给按钮注册绑定点击事件
    set.addEventListener('click', function() {
      
      
    // 获取输入框的值
      var val = inp.value
      // 存储到本地 setItem(key,value)形式
      localStorage.setItem('user',val)
      localStorage.setItem('pwd',val)
    })
    // 获取数据
    var get = document.querySelector('.get')
    get.addEventListener('click', function() {
      
      
    // 获取数据并在控制台中打印输出
      console.log(localStorage.getItem('user'))
    })
   </script>
<body>

2.2 画像の例:

ここに画像の説明を挿入
入力ユーザーの console.log ステートメントのみを記述したため、1 つはここに出力されます。

3. データを削除する

localStorage.removeItem(キー)

3.1 コード例:

<body>
  <input type="text">
  <button class="remove">删除数据</button>
  <script> 
    var inp = document.querySelector('input')
    var remove = document.querySelector('.remove')
    remove.addEventListener('click', function() {
      
      
    // 删除数据
      localStorage.removeItem('user')
    })
  </script>
</body>

3.2 画像の例:

ここに画像の説明を挿入

4. すべてのデータを消去します

localStorage.clear()

4.1 コード例:

<body>
  <input type="text">
  <button class="clear">清空所有数据</button>

  <script> 
    var inp = document.querySelector('input')

    var clear = document.querySelector('.clear')
    clear.addEventListener('click', function() {
      
      
    // 清空所有数据
      localStorage.clear()
    })
  </script>
</body>

4.2 画像の例:

ここに画像の説明を挿入
テスト缶マルチウィンドウ（ページ）共有(同じブラウザで共有できます)。

localStorage ページに保存されているデータ:

ここに画像の説明を挿入

他のページに変更して、他のページに localStorage.getItem() 入力ステートメントを記述して、 test という名前の値のサンプル画像を取得できるかどうかを確認してみましょう。

ここに画像の説明を挿入
別の HTML ページに次のように記述します。

console.log(localStorage.getItem('test')); は、
マルチウィンドウ (ページ) 共有 (同じブラウザーで共有できる) をテストするために使用されます。

2.3 localStorage の完全なサンプル コード:

<!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>09-本地存储之localStorage</title>
</head>
<body>
  <input type="text">
  <button class="set">存储数据</button>
  <button class="get">获取数据</button>
  <button class="remove">删除数据</button>
  <button class="clear">清空所有数据</button>

  <script> 
    var inp = document.querySelector('input')
    var set = document.querySelector('.set')
    // 给按钮注册绑定点击事件
    set.addEventListener('click', function() {
      
      
    // 获取输入框的值
      var val = inp.value
      // 存储到本地 setItem(key,value)形式
      localStorage.setItem('user',val)
      localStorage.setItem('pwd',val)
      localStorage.setItem('test',val)
    })

    var get = document.querySelector('.get')
    get.addEventListener('click', function() {
      
      
      console.log(localStorage.getItem('user'))
    })

    var remove = document.querySelector('.remove')
    remove.addEventListener('click', function() {
      
      
      localStorage.removeItem('user')
    })

    var clear = document.querySelector('.clear')
    clear.addEventListener('click', function() {
      
      
      localStorage.clear()
    })
    
  </script>
</body>
</html>

おすすめ

転載: blog.csdn.net/weixin_46278178/article/details/127035976
おすすめ
GitHub のホットリストに急上昇 — オープンソースのプログラミング言語とフレームワークは、どうしてこんなにも魅力的なのでしょうか?
北京ヒューマノイドロボットイノベーションセンターが、擬人化走行用の純粋な電気駆動を備えた世界初のフルサイズヒューマノイドロボット「Tiangong」を発売
ランキング
アリクラウドサーバ_ubuntu ECSシステムディスク拡張システム_
ボタンをクリックしてクリップボードにコピーします
脅威ハンティングを使用してサイバー セキュリティを強化する
ライン画像やコンテナnginxのの建設
Python での try の使用について書く
リアルタイムのデータウェアハウスを構築する方法高速データ時代、MySQLのAnalyticDBはあなたを教えて
Docker でのネットワークおよびデータ管理 (Docker Swarm クラスターおよび Docker データ管理を含む)
Java ループの比較: 従来の for ループ、拡張された for ループ、および forEach ループ
浙江大学版「C言語プログラミング（第3版）」演習2-18
Gestion du temps RTOS - Utilisation de la fonction de crochet SysTick pour réaliser l'échantillonnage de synchronisation et les sous-sections de ce chapitre
アーカイブ
もっと
2024-04-27(29)
2024-04-26(22)
2024-04-25(31)
2024-04-24(30)
2024-04-23(31)
2024-04-22(5)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

コードワールド

© 2018 codetd.com