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 ビルド)

推薦する

WindowsにOpenSSLをインストールし、OpenSSLを使用して公開鍵と秘密鍵を生成します。

1. OpenSSL公式サイト公式ダウンロードアドレス: https://www.openssl....

MySQL データベース監視ソフトウェア lepus の使用上の問題と解決策

lepus3.7 を使用して MySQL データベースを監視中に、次の問題が発生しました。このブログ...

JSX を使用してコンポーネント パーサー開発を構築する例

目次JSX環境の構築プロジェクトの設定NPMを初期化するwebpackをインストールするBabelを...

Docker swarm の簡単なチュートリアル

3つの仮想マシン132、133、134を群がらせる1. クラスターを初期化し、自分自身をクラスターに...

Alibaba Cloud に Docker をインストールする際の問題と解決策

質問Alibaba Cloud イメージを使用して Docker をインストールすると、次の図に示す...

Linux サーバー上の hosts ファイル構成の詳細な説明

Linux サーバーのホスト ファイルの構成hosts ファイルは、Linux システム内の IP ...

Nodejs でタイムドクローラーを実装する完全な例

目次事件の原因Node Scheduleを使用してスケジュールされたタスクを実装する1. node-...

JavaScript でカウントダウン効果を実装する

カウントダウン効果を実現するにはJavascriptを使用します。参考までに、具体的な内容は次のとお...

HTMLのテーブルの内容は中央に水平と垂直に表示されます

CSSスタイルファイルで指定 #class td /*表のテキストを左右上下に揃えるように設定する*...

ユーザーエクスペリエンスの要素またはWebデザインの要素

システムとユーザー環境の設計<br />Apple システムの成功は、そのシステム アー...

ORM を使用して MySQL にデータを追加する手順

【序文】 ORM を使用してデータベース内のデータを操作する場合、前提として、新しい ORM モデル...

Vue が学ぶべき知識ポイント: forEach() の使用

序文フロントエンド開発では、目的のコンテンツを取得するためにループをトラバースする必要がある状況に頻...

MySQL 8.0 の新機能の分析 - トランザクション データ ディクショナリとアトミック DDL

序文トランザクション データ ディクショナリとアトミック DDL は、MySQL 8.0 で導入され...

iframe パラメータの説明と例

<iframe src=”test.jsp” width=”100″ height=”50″ ...

Dockerイメージが消える問題を解決する

1. 50と93では鏡像が消える [root@h50 /]# df -h ファイルシステムの使用済み...