(Html 5新機能)localStorage紹介


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つの方法で名前もそれぞれの役割を知ることができます.ついでに、私が書いた方法をいくつか示します.

    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/