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

推薦する

jsはシンプルな英語-中国語辞書を実装します

この記事では、参考までに、簡単な英中辞典を実装するためのjsの具体的なコードを紹介します。具体的な内...

MySQLデータ行と行オーバーフローのメカニズムの詳細な説明

1. 行の形式は何ですか? MySQL の行形式の設定は次のように表示されます。 実際、MySQL ...

フォーム入力ボックスに関するWebデザインのヒント

この記事では、Web デザインにおけるフォーム入力ボックスに関するヒントとコードをいくつか紹介します...

スーパーバイザーウォッチドッグの使い方を3分で学ぶ

ソフトウェアとハ​​ードウェア環境centos7.6.1810 64ビット cat /etc/red...

Vue3 を使用してアップロード コンポーネントを実装するためのサンプル コード

目次一般的なアップロードコンポーネントの開発以下の機能を実装する必要がありますカスタムテンプレートサ...

ElementUI コンポーネント el-dropdown (落とし穴)

選択して変更: クリックすると現在の値が表示され、ページ UI が表示され、CSS スタイルが変更さ...

Vueライフサイクルの詳細な説明

目次ライフサイクルを理解する理由ライフサイクルとはライフサイクルフック関数作成され、マウントされたフ...

Vue.jsクラウドストレージで画像アップロード機能を実現

序文ヒント:以下はこの記事の主な内容です。以下のケースを参考にしてください。 1. オブジェクトスト...

Linux で tcpdump コマンドを使用してデータ パケットをキャプチャおよび分析する方法の詳細な説明

序文tcpdump はよく知られたコマンドライン パケット分析ツールです。 tcpdump コマンド...

浮遊要素によって引き起こされる問題と解決策の詳細な説明

1. 問題複数のフローティング要素は親要素の幅を拡張できず、親要素の高さが 0 になる可能性がありま...

CSS3 タブアニメーションの例 背景切り替えの動的効果

CSS 3 アニメーションの例 - タブの背景切り替えの動的効果、具体的なコードは次のとおりです。 ...

Linux telnetコマンドの使用

1. はじめにtelnet コマンドは、リモート ホストにログインするために使用されます。これは、T...

Docker で Let's Encrypt から永久無料 SSL 証明書を取得する方法

1. 原因公式の cerbot は面倒すぎます。野生の成長よりもさらに悪い acme.sh の使用は...

MySQLサービスが起動しても接続されない問題の解決策

mysql サービスは開始されていますが、接続できません。この問題を解決するにはどうすればよいでしょ...

MySQL レプリケーションの詳細な説明と簡単な例

MySQL レプリケーションの詳細な説明と簡単な例マスタースレーブレプリケーション技術は、MySQL...