Maison > Article > interface Web > Partagez un exemple de tutoriel de localStorage en html5

Partagez un exemple de tutoriel de localStorage en html5

零下一度original: 2017-05-31 15:09:541463parcourir

Utilisez le stockage HTML5 pour enregistrer les données. J'ai créé un petit outil pour utiliser cette nouvelle fonctionnalité.

Description : Parfois, lorsque je trouve une bonne expression anglaise ou un mot inconnu, j'ai toujours envie de l'écrire, mais après quelques jours, je ne m'en souviens plus, encore moins de l'utiliser.

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

[Recommandations associées]

1. Tutoriel sur l'utilisation de Localstorage dans les compétences du didacticiel HTML5_html5

2 Une brève discussion sur la mise en page réactive HTML5<.>

Programmation HTML5

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée de l'instance de stockage de stockage local HTML5Article suivant：Explication détaillée de l'instance de stockage de stockage local HTML5

Articles Liés

Voir plus