HTML DOM ストレージの setItem() メソッドの使い方
HTML DOM の Storage setItem() メソッドは、指定したキー名と値のペアをストレージオブジェクトに保存（追加・更新）するために使用されます。同じキー名がすでに存在する場合は、古い値が新しい値で上書きされます。データは永続的に保持される localStorage、またはブラウザセッション中のみ有効な sessionStorage のどちらにも保存できます。
構文
Storage setItem() メソッドの構文は以下のとおりです。
localStorage.setItem(keyname, value);
または
sessionStorage.setItem(keyname, value);
ここで、keyname は文字列型で、保存するデータを識別するためのキー名を表します。第 2 パラメータの value は、そのキーに関連付けて保存する新しい値です。
例
Storage setItem() メソッドの具体的な使用例を見てみましょう。ボタンをクリックしてローカルストレージにアイテムを作成し、その内容を表示します。
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center">Storage setItem() method example</h1>
<p>Create the localstorage item by clicking the below button</p>
<button onclick="itemCreate()">CREATE</button>
<p>Display the localstorage item by clicking the below button</p>
<button onclick="itemShow()">DISPLAY</button>
<p id="Sample"></p>
<script>
function itemCreate() {
localStorage.setItem("TEXT1","HELLO WORLD");
document.getElementById("Sample").innerHTML ="The key-value pair has been created";
}
function itemShow() {
var s = localStorage.getItem("TEXT1");
document.getElementById("Sample").innerHTML ="The 'TEXT1' key value is "+s;
}
</script>
</body>
</html>コードの解説
itemCreate() 関数では、localStorage.setItem("TEXT1", "HELLO WORLD") を呼び出し、「TEXT1」というキーに「HELLO WORLD」という値を保存しています。itemShow() 関数では、getItem() メソッドを使って保存された値を取得し、ページ上に表示します。
出力
このコードを実行すると、次のような結果が表示されます。
CREATE ボタンをクリックした場合：
DISPLAY ボタンをクリックした場合：
-
HTML DOM Storage key()メソッドの使い方を徹底解説
HTML DOM Storage key()メソッドとはHTML DOMのStorage key()メソッドは、ストレージオブジェクト内の指定したインデックス位置に保存されているキー名を取得するためのメソッドです。取得したいキーの番号（インデックス）は、引数としてkey()メソッドに渡します。このメソッドで利用できるストレージオブジェクトは、sessionStorageオブジェクトとlocalStorageオブジェクトの2種類です。構文Storage key()メソッドの基本構文は以下のとおりです。localStorageの場合localStorage.key(index);sessionSt
-
HTML DOM StorageのgetItem()メソッドとは？構文と使い方をサンプルコード付きで解説
HTML DOMのStorage getItem()メソッドは、指定したキー名を引数として渡すことで、Webストレージ（localStorage・sessionStorage）に保存された値を取得するためのメソッドです。キーに対応する値を返し、指定した名前のキーが存在しない場合にはnullが返されます。構文Storage getItem()メソッドの基本構文は以下のとおりです。localStorage.getItem(keyname);またはsessionStorage.getItem(keyname);ここで keyname は文字列型の値であり、取得したい項目のキー名を表します。local