分享html5中localStorage的實例教程

來源：懂視網責編：小采時間：2020-11-27 15:08:42

分享html5中localStorage的實例教程

分享html5中localStorage的實例教程:使用html5的storage來保存數據. 做了個小工具來用一下這個新特性。需求說明: 有時發現有好的英語表達或者是陌生的單詞,總是想記下來,但是過幾天之后又不記得了,更別說運用了.<!DOCTYPE html> <head> <meta charset=&

推薦度：

點擊下載本文 文檔為doc格式

導讀分享html5中localStorage的實例教程:使用html5的storage來保存數據. 做了個小工具來用一下這個新特性。需求說明: 有時發現有好的英語表達或者是陌生的單詞,總是想記下來,但是過幾天之后又不記得了,更別說運用了.<!DOCTYPE html> <head> <meta charset=&

使用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 程序設計

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com