집 > 기사 > 웹 프론트엔드 > html5의 localStorage 예제 튜토리얼 공유

html5의 localStorage 예제 튜토리얼 공유

零下一度원래의: 2017-05-31 15:09:541421검색

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：html5 로컬 스토리지 스토리지 인스턴스에 대한 자세한 설명다음 기사：html5 로컬 스토리지 스토리지 인스턴스에 대한 자세한 설명