使用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 程序设计
以上就是分享html5中localStorage的实例教程的详细内容，转载自php中文网
发表评论 取消回复