html5의 localStorage 예제 튜토리얼 공유-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

html5의 localStorage 예제 튜토리얼 공유

零下一度

May 31, 2017 pm 03:09 PM

HTML5 저장소를 사용하여 데이터를 저장하세요. 이 새로운 기능을 사용하기 위해 작은 도구를 만들었습니다.

요구사항 설명 : 가끔 좋은 영어 표현이나 낯선 단어를 발견해서 꼭 적어두고 싶은데, 며칠이 지나면 사용은커녕 기억도 나지 않습니다.

<!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=&#39;text/javascript&#39;>     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(&#39;总共&#39;+entries.length+&#39;个, 当前第&#39;+(curIndex+1)+&#39;个&#39;);
    }
     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 = $(&#39;en&#39;).value;
        var data_zh = $(&#39;zh&#39;).value;
        var data = {en: data_en, zh: data_zh};
        var time = new Date().getTime();
        if (data_en ==&#39;&#39; && data_zh == &#39;&#39;) // TODO: 正则
        {
            alert(&#39;必须输入中英文表达!&#39;);
        }
        else
        {
            localStorage.setItem(time, JSON.stringify(data));               
            // Update UI
            log(&#39;保存成功!&#39;);
            // ReLoad entries
            loadEntries($(&#39;dayselection&#39;).value);
            // Recovery current entry
            curIndex --;
            showNext();
        }
    }
     function deleteEntry()
    {
        var currentEntry = entries[curIndex];
        if (currentEntry)
        {
            localStorage.removeItem(currentEntry.time);
            // Update UI
            log(&#39;删除成功!&#39;);
            // Reload entries
            loadEntries($(&#39;dayselection&#39;).value);
            // Go to next entry
            curIndex --;
            showNext();
        }
    }

    function clearStorage()
    {
        localStorage.clear();
        log(&#39;数据初始化完成!&#39;);
    }

    function showNext()
    {   
        if (curIndex +1 <= entries.length-1)
        {
            curIndex ++;
            var entry = entries[curIndex];
            showTextarea(entry.data);

            log(&#39;总共&#39;+entries.length+&#39;个, 当前第&#39;+(curIndex+1)+&#39;个&#39;);
        }
    }

    function showPrevious()
    {
        if (curIndex-1 >= 0)
        {
            curIndex --;
            var entry = entries[curIndex];          
            showTextarea(entry.data);

            log(&#39;总共&#39;+entries.length+&#39;个, 当前第&#39;+(curIndex+1)+&#39;个&#39;);
        }
    }

    function showTextarea(data)
    {
        var target_en = $(&#39;en&#39;);
        var target_zh = $(&#39;zh&#39;);
        target_en.value = data.en;
        target_zh.value = data.zh;
    }

    function clearTextarea()
    {
        $(&#39;en&#39;).value = &#39;&#39;;
        $(&#39;zh&#39;).value = &#39;&#39;;
    }

    function $(id)
    {
        return document.getElementById(id);
    }

    function log(msg)
    {
        var target = document.getElementById(&#39;msg&#39;);
        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>

로그인 후 복사

2. html5 반응형 레이아웃에 대한 간략한 이야기

위 내용은 html5의 localStorage 예제 튜토리얼 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.