Home > Article > Web Front-end > Share an example tutorial of localStorage in html5

Share an example tutorial of localStorage in html5

零下一度Original: 2017-05-31 15:09:541463browse

Use html5 storage to save data. I made a small tool to use this new feature.

Requirement description: Sometimes I find a good English expression or an unfamiliar word, and I always want to write it down, but after a few days I can’t remember it, let alone use it.

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

[Related recommendations]

1. Localstorage usage tutorial in HTML5_html5 tutorial skills

2. A brief talk about html5 responsive layout

3. HTML5 Programming

The above is the detailed content of Share an example tutorial of localStorage in html5. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of html5 local storage storage instanceNext article：Detailed explanation of html5 local storage storage instance

See more

Share an example tutorial of localStorage in html5

Related articles