<HTML>
<ヘッド>
の<meta charset = "UTF-8"を>
<タイトル>ウェブ存储</ TITLE>
</ HEAD>
<BODY>
<P ID = "結果"> </ P>
<divのスタイル= "ボーダー：2ピクセル破線#CCC;幅：320PX;テキスト整列：センター;">
<= "サイト名"のラベル>网站名（ ）キー</ラベル>
の<input type = "テキスト" ID = "サイト名" NAME = "サイト名"クラス= "テキスト" />
<BR/>
<：网址（値）<= "SITEURL"のラベル> /ラベル>
の<input type = "テキスト" ID = "SITEURL" NAME = "SITEURL" />
<BR/>
の<input type = "ボタン"のonclick = "保存（）"値= "新增记录" />
<時間/>
</ label>は：= "search_site">输入网站名のための<ラベル
の<input type = "text" ID = "search_site"=名前"search_site" />
<INPUTタイプ= "ボタン" onclickの= "検索（）"値= "サイト検索" />
<P ID = "find_result"> </ P>
</ div>
< >スクリプト
//ストアは、主にWebオブジェクトとストレージIndexedDataBaseのAPI（ウェブSQL DB廃止された）を使用します
// PS：のlocalStorageストレージインスタンスである
インスタンスではないストレージ、globalStorage（location.host）の// globalStorageさ
のsessionStorageはのみ短いセッションストレージのための長期保存には適していない//
//長期記憶のlocalStorageことができる
//サポートするかどうかを決定する
のiF {（typeof演算（ストレージ）== "未定義"！）
はconsole.log（ "サポート"）;
} {それ以外
はconsole.log（ "動作しない"）;
}
//時間制限ありません保存のlocalStorage
のlocalStorage .sitename = "面白い"; //プロパティが保持して使用
document.querySelector（ "＃結果"）innerHTMLの = ` サイト名を$ {}` localStorage.sitename ;.
; //使用localStorage.setItem（ "サイト名"、1）メソッドの保存
localStorage.setItem（ "sitename2を" ,. 6）;
はconsole.log（localStorage.sitename）;
localStorage.removeItem（ "サイト名"）; //除去方法、取り外し可能である属性を使用して
コンソール。ログ（localStorage.sitename）。
VAR名= localStorage.key（2）; //索引
にconsole.log（名）;
//保存数据
（）{セーブ機能
。VARのSITEURL =のdocument.getElementById（ "SITEURL"）値。
VaRのサイト名=のdocument.getElementById（ "サイト名"）値。
localStorage.setItem（サイト名、SITEURL）。
警告（ "添加成功"）;
}
//查找数据
関数find（）{
。VAR search_site =のdocument.getElementById（ "search_site"）値。
VaRのサイト名= localStorage.getItem（search_site）。
VaRのfind_result =のdocument.getElementById（ "find_result"）;
find_result.innerHTML = search_site + "的网址是：" +サイト名。
}
</ SCRIPT>
</ BODY>
</ HTML>