使用html5的storage来保存数据. 做了个小工具来用一下这个新特性。
需求说明: 有时发现有好的英语表达或者是陌生的单词,总是想记下来,但是过几天之后又不记得了,更别说运用了.
<!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+'个, 当前第'+(curIndex+1)+'个'); } 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('必须输入中英文表达!'); } 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('数据初始化完成!'); } function showNext() { if (curIndex +1 <= entries.length-1) { curIndex ++; var entry = entries[curIndex]; showTextarea(entry.data); log('总共'+entries.length+'个, 当前第'+(curIndex+1)+'个'); } } function showPrevious() { if (curIndex-1 >= 0) { curIndex --; var entry = entries[curIndex]; showTextarea(entry.data); log('总共'+entries.length+'个, 当前第'+(curIndex+1)+'个'); } } 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天内 </option> <option value="0.04166666667"> 1小时内 </option> <option value="3"> 3天内 </option> <option value="7"> 7天内 </option> <option value="14"> 14天内 </option> <option value="30"> 1月内 </option> <!-- <option value=""> </option> --> </select> </tr> <input type="button" id="prev" value="上一个" onclick="showPrevious();"> <input type="button" id="next" value="下一个" onclick="showNext();"> <hr> 英语表达:<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="保存内容" onclick="saveEntry();"> <input type="button" id="delete" value="删除内容" onclick="deleteEntry();"> <hr> <p id="msg"></p><div></body></html>【相关推荐】
1. HTML5中Localstorage的使用教程_html5教程技巧
2. 浅谈html5 响应式布局
3. HTML5 程序设计
