分享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>【相关推荐】
1. HTML5中Localstorage的使用教程_html5教程技巧
3. HTML5 程序设计
Atas ialah kandungan terperinci 分享html5中localStorage的实例教程. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1393
52
1207
24
Sempadan Jadual dalam HTML
Sep 04, 2024 pm 04:49 PM
Panduan untuk Sempadan Jadual dalam HTML. Di sini kita membincangkan pelbagai cara untuk menentukan sempadan jadual dengan contoh Sempadan Jadual dalam HTML.
Jadual Bersarang dalam HTML
Sep 04, 2024 pm 04:49 PM
Ini ialah panduan untuk Nested Table dalam HTML. Di sini kita membincangkan cara membuat jadual dalam jadual bersama-sama dengan contoh masing-masing.
HTML jidar-kiri
Sep 04, 2024 pm 04:48 PM
Panduan untuk HTML margin-kiri. Di sini kita membincangkan gambaran keseluruhan ringkas tentang HTML margin-left dan Contoh-contohnya bersama-sama dengan Pelaksanaan Kodnya.
Susun Atur Jadual HTML
Sep 04, 2024 pm 04:54 PM
Panduan untuk Susun Atur Jadual HTML. Di sini kita membincangkan Nilai Susun Atur Jadual HTML bersama-sama dengan contoh dan output n perincian.
Pemegang Tempat Input HTML
Sep 04, 2024 pm 04:54 PM
Panduan untuk Pemegang Tempat Input HTML. Di sini kita membincangkan Contoh Pemegang Tempat Input HTML bersama-sama dengan kod dan output.
Memindahkan Teks dalam HTML
Sep 04, 2024 pm 04:45 PM
Panduan untuk Memindahkan Teks dalam HTML. Di sini kita membincangkan pengenalan, cara teg marquee berfungsi dengan sintaks dan contoh untuk dilaksanakan.
Senarai Tertib HTML
Sep 04, 2024 pm 04:43 PM
Panduan kepada Senarai Tertib HTML. Di sini kami juga membincangkan pengenalan senarai dan jenis Tertib HTML bersama-sama dengan contoh mereka masing-masing
Butang onclick HTML
Sep 04, 2024 pm 04:49 PM
Panduan untuk Butang onclick HTML. Di sini kita membincangkan pengenalan, kerja, contoh dan onclick Event masing-masing dalam pelbagai acara.
