JavaScript_javascriptスキルでlocalStorageを利用する際のポイントを詳しく解説

localStorage は主に Cookie を置き換え、Cookie の読み書きの難しさや容量の制限を解決するために使用されます (Cookie の使用上のポイント を参照してください)。

localStorage には次の機能があります

1.localStorage は共通のオブジェクトであり、どのオブジェクトに対する操作も適用できます。

2. localStorage オブジェクトの属性値は文字列のみです。

これには特別な注意が必要です。オブジェクトを localStorage に保存するとします。
など

var obj = {
"na=me": "chua",
age: 9
}
//拼接到localStorage
var str = "";
for(var i in obj){
str += encodeURIComponent(i) + "=" + encodeURIComponent(obj[i]) + ";"
}
str = str.substring(0,str.length - 1);
localStorage.testObj = str;
//解析出来
var strA = localStorage.testObj.split(";");
var newObj = {};
for(var i = 0; i < strA.length; i++){
var tmp = strA[i].split("=");
newObj[decodeURIComponent(tmp[0])] = decodeURIComponent(tmp[1]);
}

もちろん、JSON クラスを使用してオブジェクトを文字列に変換して保存し、取り出すときにその json 文字列を実際に使用可能な json オブジェクト形式に変換することもできます

3. localStorage でサポートされるデフォルトのスペース サイズは 5M で、最新のブラウザーで十分にサポートされます

xiaowei0705 の HTML5 LocalStorage ローカル ストレージ カットアウトを借用

Script House は、 を携帯電話で使用する場合、それをサポートするためにバックグラウンドでメモリ領域を開く必要があることを全員に注意するよう促します。

「QUOTA_EXCEEDED_ERR」は例外です。使用しているストレージ容量が制限 (5M) を超えている場合、この例外が報告されます。

4.localStorage 自体にはメソッドがあります

キーと値のペアを追加します: localStorage.setItem(key,value)

キー値の取得: localStorage.getItem(key)

キーと値のペアを削除します: localStorage.removeItem(key)。

すべてのキーと値のペアをクリアします: localStorage.clear()。

localStorage:localStorage.key(index)のプロパティ名(キー名)を取得します。

通常のオブジェクトとは異なるプロパティの長さもあります:

localStorage: localStorage.length に保存されているキーと値のペアの数を取得します。

次の例は、localStorage
のキーと値のペアを取得するために使用されます。

for(var i=0;i<localStorage.length;i++){
console.log(localStorage.key(i)+ " : " + localStorage.getItem(localStorage.key(i)));
} 

ネイティブ メソッドを信頼するという原則に基づき、localStorage の運用には可能な限りネイティブ メソッドを使用する必要があります。ただし、iPhone/iPad で setItem() を呼び出すと、奇妙な QUOTA_EXCEEDED_ERR エラーが発生することがあります。解決策は、setItem の前にremoveItem() を実行することです。したがって、この互換性の問題から判断すると、オブジェクトを使用してキーと値のペアを追加/削除する方が便利で、互換性も高いと思われます。

5.localStorage イベント

localStorage のストレージ イベントは、ストレージ イベント ハンドラー内のストレージ アクションをキャンセルできません。

ストレージ イベントは、localStorage データが変更された後にブラウザーが提供する単なる通知です。ここでの条件は、データが実際に変更されたことであることに注意してください。つまり、現在のストレージ領域が空の場合、clear() を再度呼び出してもイベントはトリガーされません。または、setItem() を使用して既存の値と同じ値を設定した場合、イベントはトリガーされません。ストレージ領域が変更されるとトリガーされます。これには、多くの便利なプロパティが含まれています:

•storageArea: ストレージのタイプ (セッションまたはローカル) を示します
•key: 変更された項目のキー
•oldValue: key
の元の値 •newValue: キーの新しい値
•url*: キー変更が行われる URL

注: url 属性は、初期の仕様では uri 属性でした。一部のブラウザは以前にリリースされており、この変更が含まれていませんでした。互換性の理由から、url 属性を使用する前に、url 属性が存在するかどうかを確認する必要があります。url 属性がない場合は、uri 属性
を使用する必要があります。

PS: Firefox と Chrome ではストレージと読み取りは正常ですが、ストレージ イベントのトリガーに問題があるようです。Chrome は、localStorage のページを変更することでこのページのストレージ イベントをトリガーできますが、ウィンドウはトリガーされません。 storage イベントを変更した後、A.html と B.html に同時にアクセスすると、ページ A で setItem を実行すると、ページ B のウィンドウの storage イベントをトリガーできます。同様に、ページ B で setItem を実行すると、ページ A のウィンドウのストレージ イベント。IE9 では、ページ自体の設定値が現在のページのストレージ イベントをトリガーできます。また、現在のページの設定値が同じ配下の他のページ ウィンドウのストレージ イベントをトリガーすることもできます。たとえば、PrimeTechBlog の WebStorage-localstorage
の最初の試行が推奨されます。

したがって、互換性のあるブラウザーに対して互換性のある処理関数を作成するか、単純にストレージ イベントを使用しないことをお勧めします。

例

if (window.addEventListener) {
window.addEventListener("storage", handle_storage, false);
} else {
window.attachEvent("onstorage", handle_storage);
};
function handle_storage(e) {
if (!e) { e = window.event; }
//响应代码部分 ...
} 

一些小點：

　　 localStorage要透過網域存取的方式才能運作

　如果呼叫clear()方法，那麼key、oldValue和newValue都會被設定為null。

　　localStorage使用方式一致

•localStorage - 沒有時間限制的資料儲存
•sessionStorage - 針對一個 session 的資料儲存

localStorage提供了幾個方法:

1、儲存：localStorage.setItem(key,value)

如果key存在時，更新value

2、取得：localStorage.getItem(key)

如果key不存在回傳null

3、刪除：localStorage.removeItem(key)

一旦刪除，key對應的資料將會全部刪除

4、全部清除：localStorage.clear()

某些時候使用removeItem逐個刪除太麻煩，可以使用clear,執行的後果是會清除所有localStorage物件保存的資料

5、遍歷localStorage儲存的key

.length 資料總量，例：localStorage.length
.key(index) 取得key，例：var key=localStorage.key(index);

6、儲存JSON格式資料

JSON.stringify(data) 將一個物件轉換成JSON格式的資料字串,傳回轉換後的字串
JSON.parse(data) 將資料解析成對象，傳回解析後的對象

備註：localStorage存數的資料是不能跨瀏覽器共用的，一個瀏覽器只能讀取各自瀏覽器的資料,儲存空間5M。