IT用語辞典バイナリ | さくいん | サイトマップ | ヘルプ | お気に入りに追加  
HTML5 JavaScript API
IT用語辞典バイナリ<パソコン用語・コンピュータ辞書>
コンピュータ偉人伝<人物・画像・写真・プログラミング>
コンピュータ偉人伝<人物・画像・写真・プログラミング>
コンピュータ偉人伝<人物・画像・写真・プログラミング>
拡張子辞典<ファイル・変換・変更・表示>
HTML5タグリファレンス
CSS3リファレンス
HTML5 JavaScript API
エクセル関数リファレンス
ITパスポート試験
 
  
  IT用語辞典バイナリ > HTML5 JavaScript API > Web Storageの使い方 > Web Storageでデータの読み書きを行うには?
  カテゴリ別さくいん

Web Storageでデータの読み書きを行うには?

Web Storageでデータの読み書きを行うには

解説

ブラウザにデータを保存するWeb Storageには、データを保持する単位の違いに応じてローカルストレージとセッションストレージという二種類の保存領域があります。この二つの違いは、セッションストレージはタブやウィンドウごとに生成され、閉じられると削除されるのに対して、ローカルストレージは意図的に削除しない限り内容が保持されるということです。

ローカルストレージとセッションストレージの対比とデータが保持される単位については、ローカルストレージとセッションストレージの違いは?を参照ください。

ローカルストレージにはwindowオブジェクトのlocalStorage属性、セッションストレージにはwindowオブジェクトのsessionStorage属性を通じてアクセスします。

// ローカルストレージ
var locStorage = window.localStorage;

// セッションストレージ
var sesStorage = window.sessionStorage;

この二つは同じStorageインターフェイスオブジェクトで、属性メソッドも共通であるため、ここではStorageオブジェクトとして統一的に解説します。

Storageオブジェクトのデータ格納方式は辞書のような項目名付きの方式(Key-Value Store)で、文字列をインデックスとする配列のようにして読み書きします。

データを格納する場合は、「setItem(key, value)」メソッドを呼び出します。キーkeyはデータを保存する項目名、値valueはその項目に保存するデータです。
同じキーの項目がすでに存在した場合は、すでにある項目の値が新しい値value上書きされます。このため、項目のキーが重複することはありません。
valueに文字列以外を指定した場合は、暗黙的に「Object.toString()」メソッドによって文字列に変換された結果が格納されます。

// storageはStorageオブジェクト

// キー「name」で値「Jack」をStorageオブジェクトに格納
storage.setItem("name","Jack");

データを取得する場合は、「getItem(key)」メソッドを使用します。このメソッドキーに対応する値を返し、キーが存在しなければエラーではなくnullを返します。

// キー「name」で格納した値を取得
var name = storage.getItem("name");

すべてのデータ項目を削除したい場合は、「clear()」メソッドを呼び出します。

// 格納していたデータをすべて削除 
storage.clear();

特定のデータ項目を削除したい場合は、「removeItem(key)」メソッドを使用します。キーkeyで指定した項目が存在しなければ何もしません。

// 5 項目追加
storage.setItem("name0","Dick");
storage.setItem("name1","Jack");
storage.setItem("name2","John");
storage.setItem("name3","Kate");
storage.setItem("name4","Mary");
storage.setItem("name5","Bruno"); 

// 1 項目削除
storage.removeItem("name3");

保存されている項目数は読み取り専用の「length」属性を参照します。

特定の位置のキーを取得したい場合は、「key(index)」メソッドを使います。indexは格納位置を表し、ゼロから始まる整数値です。キーは一定の順序でStorageオブジェクトに格納されていますが、この順番は追加順ではありません。特定のキーの格納位置は、追加・削除では変化しますが、値の更新では変化しないことが保障されています。

indexに対応するキーがない場合はnullを返します。

特定のキーの格納位置を事前に知ることは難しいため、通常は、個別のキーについてではなく、以下のようにすべてのキーを列挙する場合に使用します。

// 項目を列挙。storage.lengthは項目数
for( var i = 0; i < storage.length; i++){
    // インデックス i のキーを取得
    // 格納順は、追加順ではない
    var key = storage.key(i); 
    name = storage.getItem(key);
    console.log("index:" + i + " key:" + key + " name:" + name);
}

Storageオブジェクトへ任意のオブジェクトを格納する場合、自動的に行われる「Object.toString()」メソッドによる文字列変換では、ほとんどの場合、もとのオブジェクトに含まれていた情報のかなりの部分が失われてしまい、取り出した際に意図通りに復元することができません。

そこで、こうした場合には、JSON形式に変換する「JSON.stringify(value)」メソッドJSON形式から復元する「JSON.parse(text)」メソッドを使用します。JSONは、JavaScriptオブジェクトを文字列形式で表現する一般的な形式で、これらの変換・復元メソッドもメジャーなブラウザでは標準的に組み込まれています。

オブジェクトJSON形式の文字列に変換する場合は以下のようにします。

var array1 = [1,2,3,4,5];
// 配列をJSONに変換
// JSON文字列の中身は"[1,2,3,4,5]"になる。
var json = JSON.stringify(array1);

JSON形式の文字列オブジェクトに変換する場合は以下のようにします。

var array2 = JSON.parse(json);

標準規格では項目の読み書きには、ここまで紹介してきた専用のメソッドを使用することが推奨されていますが、Storageオブジェクトに、キーと同名のプロパティが存在するかのようにして、データ項目にアクセスすることも可能です。

// キー「myCustomKey」で値「Mary」をStorageオブジェクトに格納
// キーを通常のプロパティの形式で追加し、値をセットする。
storage.MyCustomKey = "Mary";

// キー「myCustomKey」の値を専用のメソッドを使って「Jack」に更新
storage.setItem("myCustomKey","Jack");

// キーを通常のプロパティの形式で読み込む
var name = storage.myCustomKey;

// キーを連想配列形式で読み込む
var name2 = storage["myCustomKey"];

関連項目




V20 PRO L-01JV20 PRO L-01J
NTTドコモが販売するスマートフォン。
Withings Steel HRWithings Steel HR
フランスの家電メーカー・Withingsが販売するスマートウォッチ。
Disney Mobile on docomo DM-01JDisney Mobile on docomo DM-01J
NTTドコモが販売するスマートフォン。

 ・ITパスポート試験とは
 ・試験範囲と内容
 ・サンプル問題にチャレンジ

 ・Windowsの歴史
ジョン・マッカーシー LISPの開発者
ジョン・マッカーシー
人工知能の研究分野における第一人者。
スティーブ・ジョブズ Appleの共同創設者
スティーブ・ジョブズ
「Mac」や「iPhone」を生み出した経営者。
デニス・リッチー C言語、UNIXの開発者
デニス・リッチー
C言語の設計、UNIXの開発に携わった人物。
».m4b MPEG-4オーディオファイルの拡張子。 up!
».m4r iPhoneの着メロにするAACファイルにつく拡張子。 up!
».xlsx Excel 2007で作成したファイルのデフォルトの拡張子。
».docx Word 2007の標準的な保存形式。XML形式となっている。

2017年2月25日現在
ランキング1   ICT (用語辞典)
ランキング2   セグメント (用語辞典)
ランキング3   リマインダー  (用語辞典)
ランキング4   スワイプ  (用語辞典)
ランキング5   プラットフォーム  (用語辞典)
ランキング6   リーンスタートアップ  (用語辞典)
ランキング7   デプロイ  (用語辞典)
ランキング8   アクティブユーザー  (用語辞典)
ランキング9   サードパーティ  (用語辞典)
ランキング10   パーマリンク  (用語辞典)
RSS 0.91 RSS 1.0 RSS 2.0
IT用語辞典バイナリについてウェブリオ株式会社についてお問い合わせ先テクニカルライター募集利用規約
プライバシーポリシー著作権・商標について協力社一覧Weblio 辞書スマート翻訳英和辞典 - Weblio辞書Weblio英会話
©2012 Weblio, Inc. All rights reserved.