分享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教程技巧
2. 浅谈html5 响应式布局
3. HTML5 程序设计
HTML5
分享html5中localStorage的实例教程

相关文章
