(Html 5新機能)localStorage紹介
1547 ワード
Html 5以前はlocalStorageがなかったため、パスワードを記録したり自動ログインしたりする機能を実現するには、基本的にCookieに頼るしかなかったが、現在は携帯電話しか使えないのが一般的で、現在は携帯電話でWebページを閲覧してCookieで類似の機能を実現できないため、Html 5は私たちに非常に使いやすい行特性localStorageを提供してくれた.
localStorageの機能はCookieとあまり差がなく、主にscriptで使用する必要がある情報を記録するために使用され、その構造はMapと非常に類似しており、key/valueの検索方法を提供しているので、非常に便利です.
localStorageで最もよく使われるAPIは、setItem(key,value)、getItem(key)、remove(key)の3つです.この3つの方法で名前もそれぞれの役割を知ることができます.ついでに、私が書いた方法をいくつか示します.
上のコードは以下のアドレスで確認することもできます(chromeやhtml 5をサポートする他のブラウザを使用することが望ましいです)
http://jsfiddle.net/kiddYu619/YAAR8/
localStorageの機能はCookieとあまり差がなく、主にscriptで使用する必要がある情報を記録するために使用され、その構造はMapと非常に類似しており、key/valueの検索方法を提供しているので、非常に便利です.
localStorageで最もよく使われるAPIは、setItem(key,value)、getItem(key)、remove(key)の3つです.この3つの方法で名前もそれぞれの役割を知ることができます.ついでに、私が書いた方法をいくつか示します.
var saveKeyValue = function(key, value) {
if (typeof localStorage !== undefined) {
try {
localStorage.setItem(key, value);
} catch (e) {
if (e == QUOTA_EXCEEDED_ERR) {
alert('Quota exceeded');
}
}
}
};
var getValueByKey = function(key) {
var value = localStorage.getItem(key);
return value == null ? 'empty!' : value;
};
var removeKey = function(key) {
localStorage.removeItem(key);
};
saveKeyValue('name', 'Jobs');
alert(getValueByKey('name'));
removeKey('name');
alert(getValueByKey('name'));
上のコードは以下のアドレスで確認することもできます(chromeやhtml 5をサポートする他のブラウザを使用することが望ましいです)
http://jsfiddle.net/kiddYu619/YAAR8/