ウェブストレージAPI
Web Storage API は、ブラウザでデータを保存および取得するための単純な構文です。使い方は非常に簡単です。
Web Storage API は、すべてのブラウザーでサポートされています。
| Chrome | IE/Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes |
localStorageオブジェクト
localStorageオブジェクトは、特定のWebサイトのローカルストレージへのアクセスを提供します。これにより、そのドメインのデータ項目を保存、読み取り、追加、変更、および削除できます。
データは無期限で保存され、ブラウザを閉じてもデータは削除されません。
データは、日単位、週単位、年単位で利用できます。
setItem()メソッド
localStorage.setItem()メソッドは、データ項目をストレージに格納します。
パラメータとして名前と値を取ります。
例
localStorage.setItem("name", "John Doe");
getItem()メソッド
localStorage.getItem()メソッドは、ストレージからデータ項目を取得します。
パラメータとして名前を取ります:
例
localStorage.getItem("name");
sessionStorageオブジェクト
sessionStorageオブジェクトはlocalStorageオブジェクトと同じです。
違いは、sessionStorageオブジェクトが1つのセッションのデータを格納することです。
ブラウザを閉じるとデータは削除されます。
setItem()メソッド
sessionStorage.setItem()メソッドは、データ項目をストレージに格納します。
パラメータとして名前と値を取ります。
例
sessionStorage.setItem("name", "John Doe");
getItem()メソッド
sessionStorage.getItem()メソッドは、ストレージからデータ項目を取得します。
パラメータとして名前を取ります。
例
sessionStorage.getItem("name");
ストレージオブジェクトのプロパティとメソッド
|
Property/Method |
Description |
|---|---|
| key（n) | ストレージ内のn番目のキーの名前を返します |
| length | Storageオブジェクトに格納されているデータ項目の数を返します |
| getItem(keyname) | 指定されたキー名の値を返します |
| setItem(keyname、value) | ストレージにキーを追加するか、キー値を更新します(既に存在する場合) |
| removeItem(keyname) | そのキーをストレージから削除します |
| clear（） | ストレージからすべてのキーを空にする |
Web Storage APIの関連ページ
|
Property |
Description |
|---|---|
| window.localStorage | キーと値のペアを Web ブラウザーに保存できます。有効期限なしでデータを保存します |
| window.sessionStorage | キーと値のペアをWebブラウザーに保存できます。1セッション分のデータを保存します |
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。