この投稿では、JavaScript のストレージ「key()」メソッドを示します。
Storage key() メソッドは JavaScript で何をしますか?
” 鍵（） 」メソッドは、指定されたインデックスに配置されたキー名を取得する Storage オブジェクトに関連付けられています。 「ストレージ」オブジェクトは「 地元 ' または ' セッション ' 保管所。これにより、ユーザーはローカル ストレージ キーとセッション ストレージ キーの両方にアクセスできるようになります。
構文 (ローカル ストレージの場合)
ローカルストレージ。 鍵 ( 索引 ) ;
上記の構文は 1 つのパラメータを受け入れます。 索引 」は、指定されたインデックスのキーの名前を返します。
構文 (セッションストレージの場合)
セッションストレージ。 鍵 ( 索引 ) ;
上記の構文は、「localStorage」と同じ「index」パラメータもサポートしています。
上記で定義された両方の構文は、ストレージ オブジェクトのキー名を文字列として返します。両方を 1 つずつ実装してみましょう。
例 1: ストレージ「key()」メソッドを適用して、指定されたローカル ストレージ キー名を取得する
この例では、ローカルで指定されたインデックス ストレージ キー名を取得するためのストレージ「key()」メソッドの実際の実装について説明します。
HTMLコード
まず、指定された HTML コードを見てください。
< h2 > ストレージキー ( ) 方法 JavaScriptで h2 >< ボタンオンクリック = 「myFunc()」 > 指定されたローカル ストレージ キーを取得する ボタン >
< PID = 'デモ' > p >
上記のコード スニペットでは次のようになります。
- まず、「」で小見出しを指定します。 ' 鬼ごっこ。
- 次に、「」を使用してボタンを追加します。 <ボタン> 「」を含むタグ クリック時 「関数を実行するイベント」 myFunc() 」ボタンをクリックしてください。
- 最後に、「」で空の段落を作成します。 」タグには、割り当てられた ID「demo」を通じて簡単にアクセスできます。
JavaScript コード
次に、以下のコードに進みます。
< 脚本 >ローカルストレージ。 セットアイテム ( 'Webサイト' 、 「リナックス」 ) ;
ローカルストレージ。 セットアイテム ( 「はじめてのチュートリアル」 、 「HTML」 ) ;
ローカルストレージ。 セットアイテム ( 「第二チュートリアル」 、 「ジャバスクリプト」 ) ;
関数 myFunc ( ) {
×があります = ローカルストレージ。 鍵 ( 1 ) ;
書類。 getElementById ( 'デモ' ) 。 内部HTML = バツ ;
}
脚本 >
上記のコード ブロックでは次のようになります。
- ” ローカルストレージ ” プロパティは” に関連付けられています setItem() 」メソッドを使用して、指定したローカルストレージ項目を設定します。
- 次に、「」という名前の関数 myFunc() 」と定義されています。
- その定義では、「 鍵（） 」メソッドは「」に関連付けられています。 ローカルストレージ ” プロパティを使用して、最初のインデックスのキー名を取得します。
- その後、「 document.getElementById() 」メソッドが適用され、ID「demo」を使用して空の段落にアクセスし、ローカル ストレージ アイテム キー「name」を追加します。
出力
ご覧のとおり、出力にはローカル ストレージ項目のキー名 .e が表示されます。ボタンをクリックすると、アルファベット順で最初のインデックスに「SecondTutorial」が表示されます。
例 2: ストレージ「key()」メソッドを適用して、指定されたセッション ストレージ キー名を取得する
この例では、ストレージの「key()」メソッドは、特定のインデックスを持つセッション ストレージ キー名を返します。
HTMLコード
まず、次の HTML コードを実行します。
< h2 > ストレージキー ( ) 方法 JavaScriptで h2 >< ボタンオンクリック = 「myFunc()」 > 指定されたセッションストレージキーを取得する ボタン >
< PID = 'デモ' > p >
上記のコードは例 1 と同じですが、HTML コンテンツがいくつか更新されています。
JavaScript コード
次に、次のコードに進みます。
< 脚本 >セッションストレージ。 セットアイテム ( 'Webサイト' 、 「リナックス」 ) ;
セッションストレージ。 セットアイテム ( '初め' 、 「HTML」 ) ;
セッションストレージ。 セットアイテム ( '2番' 、 「ジャバスクリプト」 ) ;
関数 myFunc ( ) {
×があります = セッションストレージ。 鍵 ( 2 ) ;
書類。 getElementById ( 'デモ' ) 。 内部HTML = バツ ;
}
脚本 >
ここでは、セッションストレージアイテムは「」を使用して作成されます。 セッションストレージ ” プロパティ、次に “ 鍵（） 」メソッドを適用して、2 番目のインデックスの指定されたインデックス セッション ストレージ キー名を取得します。
出力
この結果では、「key()」メソッドにより、2 番目のインデックスに格納されているセッション ストレージ アイテムのキー名が表示されます。ストレージキー名の検索処理は、「」から検索を開始するアルファベット順に従います。 0 ' 索引。
結論
JavaScript はストレージを提供します。 鍵（） 」メソッドを使用して、両方の「」の特定のインデックスを持つキー名を取得します。 地元 ' そしてその ' セッション 」ストレージオブジェクト。指定されたキー名をストレージ内で検索し、その名前を DOM (Document Object Model) に表示します。このタスクを実行するには「index」パラメータのみが必要です。この投稿では、JavaScript ストレージの「key()」メソッドの動作を詳しく説明しました。