html5的localStorage使用示例
使用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></pre>