localStorageは簡単なメモを書く使用

HTMLを使用+ jsの簡単なメモ、メイン味のlocalStorageの使用率を達成。

レンダリングを見てみましょう：

-------------------------------------------------- ------------------------------------

コード：

1  <！DOCTYPE HTML > 
2  < HTML のlang = "EN" > 
3  < ヘッド> 
4      < メタのcharset = "UTF-8" > 
5      < タイトル> HTML5-任务列表</ タイトル> 
6  </ ヘッド> 
7  < ボディ> 
8  < 本体> 
9  < DIV > 
10      < 入力ID = "todoMsg" タイプ= "テキスト"> </ 入力> 
11      < 入力ID = "saveMsg" タイプ= "ボタン" 値= "保存" /> 
12      < 入力ID = "clearMsg" タイプ= "ボタン" 値= "清空本地存储" /> 
13      < P スタイル= "色：＃286090;フォントサイズ：20ピクセル;" >任务列表</ P > 
14      < 時間/> 
15      < DIV ID = "todolistの" > </ DIV >
 
 < スクリプトSRC = "https://code.jquery.com/jquery-1.11.1.js" > </ スクリプト> 
18が < スクリプト> 
。19      // ローカルストアからタスクリストロードする
20のある     VAR msgList = localStorage.getItem（" msgList " ）;
 21は、 
22である     IF （msgList ！==  NULL  && msgList ！== 未定義&& msgList =！ '' ）{
 23は、         // タスクリスト表示
24          のdocument.getElementByIdを（"todolistの"）.innerHTML = msgList;
 25      }
 26である     // 単一のタスクを追加して保存
27      $（" #saveMsg " ）.click（関数（）{
 28          VAR todoMsg = のdocument.getElementById（" todoMsg " ）.Valueのを、
 29          IF （todoMsg ==  NULL  || todoMsg ==  '' ）{
 30              アラート（" を入力してくださいタスク" ）
 31が             返す;
 32          }
 33であります         VaRのtodoMsgHtml =  ' <H5> <スパンのスタイル= "色：赤">タスク：</ span>の'  + todoMsg +  ' </ H5> ' ;
 34れる         // タスクリストに追加
35          msgList = （msgList ==  nullの ？ '' ：msgList）+ todoMsgHtml;
 36          localStorage.setItem（" msgList " 、msgList）;
 37          // タスクリスト更新
38で         のdocument.getElementById（" todolistのは" ）。innerHTMLの= msgList。
39      }）;
 40      // タスクの空リスト、ブラウザ更新
41は、     （$ " #clearMsg " ）.click（関数（）{
 42である         ; localStorage.clear（）
 43である         のdocument.getElementById（" clearMsg " ）.innerHTML =  "" ;
 44れる         location.reload（）;
 45      }）;
 46である </ スクリプト> 
47  </ ボディ> 
48  </ ボディ> 
49  </ HTML >

-------------------------------------------------- -------------------------------------------------- -

概要：主な用途での経験の下でシンプルな、のlocalStorageを備えています。

あなたの無料トライアルを与えるために、クラウドサーバに美しいポイントを書くつもり次のタスクかんばんは、あなたはすぐに（ブラウザベースのクッキーの保存を）ログインせずにタスクを作成することができ、

マイクロチャンネルスキャンコードのログイン機能に加えて、タスクが永久に保存することができ、サーバに同期、あなたはまた、ローカルディスクへの鍵のエクスポートタスクを一覧表示することができます。

localStorageは簡単なメモを書く使用

おすすめ