分享html5中localStorage的实例教程

需求说明: 有时发现有好的英语表达或者是陌生的单词,总是想记下来,但是过几天之后又不记得了,更别说运用了.

!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;
     ilocalStorage.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的实例教程的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！