站長資訊網(wǎng)使用html5的storage來保存數(shù)據(jù). 做了個(gè)小工具來用一下這個(gè)新特性。
需求說明: 有時(shí)發(fā)現(xiàn)有好的英語表達(dá)或者是陌生的單詞,總是想記下來,但是過幾天之后又不記得了,更別說運(yùn)用了.
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>SO EASY!</title> <style type="text/css"> html,body { background-color: #262; color: #fff; font-family: helvetica, arial, sans-serif; margin: 0; padding: 0; font-size: 11pt; } </style> <script lang='text/javascript'> window.addEventListener("load", eventWindowLoaded, false); var entries = []; var curIndex = -1; function eventWindowLoaded() { loadEntries(1); showNext(); var dayselection = $("dayselection"); dayselection.addEventListener("change", daysSelectionChanged, false); } function daysSelectionChanged(e) { var target = e.target; loadEntries(target.value); clearTextarea(); curIndex = -1; showNext(); log('總共'+entries.length+'個(gè), 當(dāng)前第'+(curIndex+1)+'個(gè)'); } function loadEntries(days) { var now = new Date().getTime(); var arr = []; for(var i=0; i<localStorage.length; i++) { var time = localStorage.key(i); var daysBetween = (now - time)/24/60/60/1000; // console.log(daysBetween); if (daysBetween <= days) { var value = JSON.parse(localStorage.getItem(time)); var entry = {time: time, data: value}; arr.push(entry); } } entries = arr; } function saveEntry() { var data_en = $('en').value; var data_zh = $('zh').value; var data = {en: data_en, zh: data_zh}; var time = new Date().getTime(); if (data_en =='' && data_zh == '') // TODO: 正則 { alert('必須輸入中英文表達(dá)!'); } else { localStorage.setItem(time, JSON.stringify(data)); // Update UI log('保存成功!'); // ReLoad entries loadEntries($('dayselection').value); // Recovery current entry curIndex --; showNext(); } } function deleteEntry() { var currentEntry = entries[curIndex]; if (currentEntry) { localStorage.removeItem(currentEntry.time); // Update UI log('刪除成功!'); // Reload entries loadEntries($('dayselection').value); // Go to next entry curIndex --; showNext(); } } function clearStorage() { localStorage.clear(); log('數(shù)據(jù)初始化完成!'); } function showNext() { if (curIndex +1 <= entries.length-1) { curIndex ++; var entry = entries[curIndex]; showTextarea(entry.data); log('總共'+entries.length+'個(gè), 當(dāng)前第'+(curIndex+1)+'個(gè)'); } } function showPrevious() { if (curIndex-1 >= 0) { curIndex --; var entry = entries[curIndex]; showTextarea(entry.data); log('總共'+entries.length+'個(gè), 當(dāng)前第'+(curIndex+1)+'個(gè)'); } } function showTextarea(data) { var target_en = $('en'); var target_zh = $('zh'); target_en.value = data.en; target_zh.value = data.zh; } function clearTextarea() { $('en').value = ''; $('zh').value = ''; } function $(id) { return document.getElementById(id); } function log(msg) { var target = document.getElementById('msg'); target.innerHTML = msg; } </script> </head> <body> <div style="position: absolute; top: 50px; left: 50px;"> 回顧:<select id="dayselection"> <option value="1"> 1天內(nèi) </option> <option value="0.04166666667"> 1小時(shí)內(nèi) </option> <option value="3"> 3天內(nèi) </option> <option value="7"> 7天內(nèi) </option> <option value="14"> 14天內(nèi) </option> <option value="30"> 1月內(nèi) </option> <!-- <option value=""> </option> --> </select> </tr> <input type="button" id="prev" value="上一個(gè)" onclick="showPrevious();"> <input type="button" id="next" value="下一個(gè)" onclick="showNext();"> <hr> 英語表達(dá):<br/> <textarea id="en" cols="40" rows="6"></textarea> <hr> 中文解釋:<br/> <textarea id="zh" cols="40" rows="6"></textarea><br/> <input type="button" id="save" value="保存內(nèi)容" onclick="saveEntry();"> <input type="button" id="delete" value="刪除內(nèi)容" onclick="deleteEntry();"> <hr> <p id="msg"></p> <div> </body> </html>
