Heim > Artikel > Web-Frontend > Teilen Sie ein Beispiel-Tutorial von localStorage in HTML5

Teilen Sie ein Beispiel-Tutorial von localStorage in HTML5

零下一度Original: 2017-05-31 15:09:541462Durchsuche

HTML5-Speicher zum Speichern von Daten verwenden Ich habe ein kleines Tool erstellt, um diese neue Funktion zu nutzen.

Beschreibung: Manchmal, wenn ich einen guten englischen Ausdruck oder ein unbekanntes Wort finde, möchte ich es immer aufschreiben, aber nach ein paar Tagen kann ich mich nicht mehr daran erinnern, geschweige denn verwenden.

<!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>

[Verwandte Empfehlungen]

1. Tutorial zur Verwendung von Localstorage in HTML5_HTML5-Tutorial-Fähigkeiten

2. Eine kurze Diskussion des responsiven HTML5-Layouts

3. HTML5-Programmierung

Das obige ist der detaillierte Inhalt vonTeilen Sie ein Beispiel-Tutorial von localStorage in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erläuterung der lokalen HTML5-SpeicherinstanzNächster Artikel：Detaillierte Erläuterung der lokalen HTML5-Speicherinstanz

In Verbindung stehende Artikel

Mehr sehen