JS 内の Json 文字列 + Cookie + ローカルストレージ

JS 内の Json 文字列 + Cookie + ローカルストレージ

1.Json文字列

Json は主にフロントエンドとバックエンドのやり取りに使用され、XML よりも使いやすいデータ形式です。

1.1Json構文

オブジェクト、配列、単純なデータ型などを表すために使用できます。

  • {}はオブジェクトを表し、 []は配列を表します
  • キーと値は「」で区切られ、キーとキーは「」で区切られます。属性名には「」を使用する必要があります。
  • 値として NaN を使用しないようにしてください。属性の末尾に他の属性がない場合は、それを保持しないでください。

Json とオブジェクト間の変換:

JSON 文字列をオブジェクトに変換すると、`JSON.parse(JSON 文字列) は変換された js オブジェクトを返します`
     オブジェクトから JSON 文字列へ `JSON.stringify() は値を JSON 文字列に変換するために使用されます`


1.2 例

//オブジェクト形式の「文字列」データを JSON オブジェクトに変換します。let s = `{"name":"onion","age":18}`;
 console.log(s) // 文字列 => {"name":"Onion","age":18}
 console.log(JSON.parse(s)); // //オブジェクト: オブジェクト
//配列形式の「文字列」データをJSONオブジェクトに変換します。let s = `[1,5,8,9]`;
 console.log(s); // 文字列 => [1,5,8,9]
 console.log(JSON.parse(s)); //オブジェクト: オブジェクト
 -----------------------------------------------------------------------
 //オブジェクトをJSON文字列に変換します。let s = {"name":"onion","age":18};
 console.log(JSON.stringify(s)); // 文字列 => {"name":"onion","age":18}
 // 配列をJSON文字列に変換 let s = [1,5,8,9];
   console.log(JSON.stringify(s)); // 文字列 => [1,5,8,9]

知らせ:

  • 変換中、オブジェクトの関数はフィルタリングされ、印刷される結果には反映されません。
  • ディープコピーを行う場合、まずオブジェクトを文字列に変換し、その後オブジェクトに戻すことができます。
  • Json はデータ オブジェクトを保存できません。同じオブジェクト内に同じ名前の 2 つのプロパティが存在しないようにしてください。
  • デフォルトでは、JSON.stringify() によって出力される文字列にはスペースとインデント文字は含まれません。

2. クッキー

Cookieブラウザ内にユーザー情報を記録し、サーバー環境でページを開いた際に設定によりユーザーの操作情報を取得することができます。たとえば、ログイン時にユーザーのパスワードを記憶したり、個人の Taobao アカウントのショッピングカート内の情報を記憶したりします。クッキーの有効期間は、セッションレベル、長期、または設定することができます。

2.1 使い方は?

  • doucument.cookieを作成、削除、変更、読み取ることができます。

例を見てみましょう:

document.cookie = "名前=onion";
document.cookie = "年齢=18";

結果は次のとおりです。

玉ねぎは辛すぎると感じたので、代わりにジャガイモを試してみようと思いました。

**document.cookie = "name=Onion";
document.cookie = "name=土豆";
document.cookie = "年齢=18";


結果は次のとおりです。

しばらくジャガイモを食べていたのですが、ジャガイモが美味しくないことに気づき、もう食べたくないです。どうすればいいでしょうか?それでどうやって削除するのでしょうか?実際、注意深い友人は、有効期間を設定できるセッション レベルがあり、この日付が、 expiresキーワードを使用して有効期限になることを発見しました。

 document.cookie = "name=土豆;expires="+new Date('2021/11/25 03:58:20');


3. ローカルストレージ

H5 はローカル ストレージにloclstoragesessionStorageを追加します。 localstorage有効期間は永続的ですが、 sessionStorage の有効期間はセッション レベルです。ここではloclstorageに焦点を当てます。

3.1 基本的な使い方

ローカルストレージを操作するにはwindow.localstorageを使用します(windowは省略できます)

//setItem を追加
localStorage.setItem("名前","タマネギ");
//アイテムを取得
localStorage.getItem("名前","タマネギ");
//deleteremoveItem("キーと値のペア")
localStorage.removeItem("名前");
// クリア
ローカルストレージをクリアします。


3.2 例 (ユーザー名とパスワードを記憶する)

要件:ユーザーがユーザー名とパスワードを入力した後、チェックボックスをクリックしてユーザー名とパスワードを記憶し、次回ログイン時に再度入力する必要がないようにする。

ユーザー名: <input type="text" id="username">
  <br>
  パスワード: <input type="password" id="pwd">
  <br>
  <span style="font-size: 14px;">ユーザー名とパスワードを記憶する:</span> 
  <input type="checkbox" id="覚えておく">

    // チェックボックス const remember = document.getElementById('remember');
    //ユーザー名 const username = document.getElementById('username');
    //パスワード const pwd = document.getElementById('pwd');
      
    remember.onclick = 関数(){
      if (remember.checked) {
        //ユーザー名とパスワードを選択してローカルストレージに保存します。
        localStorage.setItem("ユーザー名",ユーザー名.値);
        localStorage.setItem("pwd",pwd.value);
      } それ以外 {
        // 選択から選択解除に変更し、ローカル ストレージからユーザー名とパスワードを削除します。localStorage.removeItem("username");
        ローカルストレージからアイテムを削除します。
      }
      コンソールログ();
    }
    //ページを再度開くたびに、ローカルストレージに値があるかどうかを確認します if (localStorage.getItem("username")) {
      //値がある場合は、入力ボックスに値を書き込みます。
      ユーザー名.値 = localStorage.getItem("ユーザー名")
      pwd.value = localStorage.getItem("pwd");
      //チェックボックスはデフォルトで選択されています remember.checked = true;
    }

効果:パスワードとユーザー名を入力してチェックボックスをクリックすると、データがここに保存されるため、次回ログイン時に再度入力する必要がなくなります↓

JS の Json 文字列 + Cookie + localstorage に関するこの記事はこれで終わりです。Json 文字列 + Cookie + localstorage に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript でのローカル ストレージとセッション ストレージの使用
  • Javascript で SessionStorage と LocalStorage を使用する方法
  • JavaScript で localStorage を使用する方法
  • JavaScript ローカル ストレージ: localStorage、sessionStorage、Cookie の使用
  • jsでローカルストレージを操作する方法

<<:  ウェブページでmp3またはフラッシュプレーヤーコードを再生する

>>:  IE 環境での css-vars-ponyfill の使用に関する詳細な説明 (nextjs ビルド)

推薦する

VueはTeleportをベースにModalコンポーネントを実装します

目次1. テレポートについて知る2. テレポートの基本的な使い方3. 最初のステップの最適化4. 第...

Dockerを使用してPythonランタイム環境の基本イメージを作成する方法

1. 準備1.1 Pythonインストールパッケージをダウンロードします(注:Pythonバージョン...

nginx+php-fpm サービスの HTTP ステータス コード 502 の詳細な分析

弊社の Web プロジェクトの 1 つでは、新しい都市の増加によりトラフィックと DB 負荷が増加し...

シームレスなトークンリフレッシュを実現する方法

目次1. 需要方法1方法2方法3 2. 実装3. 問題解決質問1: トークンの複数回の更新を防ぐ方法...

MySQLがクエリキャッシュをキャンセルした理由

MySQL には以前、クエリ キャッシュ (Query Cache) がありました。8.0 以降では...

VMware 上の CentOS に Oracle12.2 をサイレント インストールする詳細なグラフィック チュートリアル

環境準備: VMware+CentOS、jdk 1. システムディスクのサイズを確認する1. コマン...

MYSQL開発パフォーマンス調査:バッチデータ挿入の最適化方法

1. どのような問題に直面しましたか?標準 SQL では、通常、次の SQL 挿入ステートメントを記...

MySQL サービスとデータベース管理

目次1. サービスの開始と停止の手順1.1 Windows での MySQL 5.7 の公式 MSI...

VUE 3 テレポート コンポーネントと使用構文をすぐに使い始める

目次1. テレポートの紹介1.1. 複数のテレポートを使用する2. テレポートを使用する理由3. テ...

「いいね!」機能では MySQL と Redis のどちらを使用すればよいでしょうか?

目次1. 初心者が陥りがちな間違い2. Iteratorのremove()メソッドを使用する3. f...

IE6 で CSS スタイルの div または li の背景のタイリングと境界の破損を解決する方法

IE6 で CSS スタイルの div または li の背景のタイリングや境界の破壊を解決するには、...

Vueルータールーティングの詳細な説明

目次1. 基本的な使い方2. 注意すべき点3. マルチレベルルーティング(マルチレベルルーティング)...

Ubuntu 18.04 のsources.listをAlibabaまたはTsinghuaミラーに変更する方法

1. バックアップソースリストUbuntu のデフォルトのソースは国内サーバーではないため、更新され...

一般的なメールボックスで正常に表示できる HTML メールを作成するためのヒント

HTML メールを送信するためのヒント: スタイルを使用してインライン CSS を記述する、使用する...