使用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的实例教程的详细内容，更多请关注双恒网络其它相关文章！
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » 分享html5中localStorage的实例教程
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » 分享html5中localStorage的实例教程
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 你们有qq群吗怎么加入？
