localStorageを使用するためのシンプルな

HTML5に主にローカル・ストレージのために使用されるのlocalStorageオブジェクトを追加しました。4Kの限界にクッキーを展開するのlocalStorage、のlocalStorageデータベースは、写真などの一部のデータ、のために、検索は、それによって帯域幅を減らし、直接ブラウザに存在することができます5Mのフロントページに相当します。

手動で削除しない限り、サイト全体の長期保存のためのlocalStorageデータは、保存されたデータは有効期限はありません。クッキーは自動的に削除されます時に有効期限を使用しています。

データを保存する（1）

localStorage.setItem（キー、値）。

（2）データを読み出します

localStorage.getItem（キー）;

（3）データを削除

localStorage.removeItem（キー）;

（4）削除し、すべてのデータのlocalStorage

localStorage.clear（）

値がオブジェクトに設定されている場合、さらに、文字列が格納されているのでのlocalStorageは、toString（）メソッドのオブジェクトへの呼び出し、および、記憶されます。

localStorage.setItem（ "人物"、{ "名前"： "暁"のtoString：関数（）{ 戻り 、この .nameのを;}}）

結果：

一般的に、我々はJSONはのlocalStorageに、今回はJSON文字列にJSONに変換するJSON.stringfy（）メソッドを使用することができます。読み取り時に、JSON.parse（）を使用してJSONオブジェクトを変換します。

ここでは、道の芸術 - テンプレートの下に検索、レビューを保存するためのlocalStorageを使用してページをレンダリングするテンプレートエンジンを使用します

<！DOCTYPE HTML> 
<HTML> 
<HEAD LANG = "EN"> 
    <メタ文字コード= "UTF-8"> 
    <タイトル>首页</ TITLE> 
    <スタイル> 
        * { 
            マージン： 0 ; 
            パディング： 0 ; 
        } 
        本体{ 
            マージン - 左：300ピクセル。
        } 
        UL { 
            リスト - スタイル：なし。
        } 
        ULリチウム、DIV { 
            幅：250ピクセル。
            パディング：10pxの 0 ; 
            マージン - 左：10pxの;下：1pxの破線#CCC。
            高さ：20ピクセル; 
        } 
        { 
            フロート：右。
        } 
        入力{ 
            パディング：5pxの。
            マージン：10pxの; 
        }
     </スタイル> 
</ HEAD> 
<BODY> 
の<input type =プレースホルダ= "输入搜索关键字" / "検索"> 
の<input type = "ボタン"値= "搜索" /> 
<DIV ID = "デル" > <a href="javascript:;">清空搜索记录する</a> </ div> 
<ulのID = "UU"> 
    <LI>没有搜索记录ます。</ li> 
</ ulの> 



<スクリプトSRC = "jqueryの.min.js "> </ SCRIPT> 
<スクリプトSRC ="テンプレートウェブ。

        <LIデータインデックス= "{ {$インデックス}}"> <スパン> {{$値}} </スパン> <a href="javascript:;"> 除去する</a> </ LI> 
    {{/ }}各
</ SCRIPT> 

<SCRIPT> 
    $（関数（）{
         // ストレージを検索する際のlocalStorage 
        VAR HistoryList = window.localStorage.getItem（ "historys"）|| '[]'; // のlocalStorageに格納されていますこれは、文字列型のある
        varが JSON.parse =（HistoryList）をhistorys; // スイッチ配列オブジェクト

        $（ "[=ボタンタイプ]"）ON（ "クリック" ,. 機能（）{
             VARキーワード= $（「[タイプ検索=] " ）.val（）;
             IF（！キーワード）{ 
                アラート（「値を入力してください」HTML（HTML）。
        }。 

        
        
        レンダリング（）; // 最初のページレンダリングするページに入力

        // 単一の削除 
        $（ "＃のUu"）ON（ "クリック"、 "A" ,. 機能（）{
            VARの指数= $（この）.parentを（）。データ（ "インデックス" ）; 
           historys.splice（インデックス、 1。）; 
           window.localStorage.setItem（ "historys" 、JSON.stringify（historys））; 
           （レンダリング）; 
        }）; 

        // クリア履歴 
        $（「＃ 。デル"）ON（"クリック"" A " 関数（）{ 
            historys = []; 
            window.localStorage.setItem（ "historys」、JSON.stringify（historys））。
            レンダリング（）; 
        }）

        // localStorage.removeItem（ "名前"）
        // localStorage.clear（）

    }）; 
</スクリプト> 
</ BODY> 
</ HTML>

注：芸術templete利用の場合注：

templete（ファイル名、コンテンツ）

この関数は、通常、レンダリングされたHTMLコードを返し、テンプレートをロードするために使用されます。

2番目のパラメータで定義された</スクリプト>タグは{オブジェクト、文字列}の形で対象となる最初のパラメータは、ファイル名の<script> id値は、テンプレートデータが定義されてレンダリングするために渡されています。

詳細については、公式ドキュメントを参照してくださいhttp://aui.github.io/art-template/docs/

localStorageを使用するためのシンプルな

おすすめ