html5的localStorage使用示例

2021-09-24 10:24:36 浏览数 (1)

使用html5的storage来保存数据. 做了个小工具来用一下这个新特性。

需求说明: 有时发现有好的英语表达或者是陌生的单词,总是想记下来,但是过几天之后又不记得了,更别说运用了.

代码语言：javascript复制
<!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='text/javascript'>
    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('总共' entries.length '个, 当前第' (curIndex 1) '个');
}

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 = $('en').value;
    var data_zh = $('zh').value;
    var data = {en: data_en, zh: data_zh};
    var time = new Date().getTime();
    if (data_en =='' && data_zh == '') // TODO: 正则
    {
        alert('必须输入中英文表达!');
    }
    else
    {
        localStorage.setItem(time, JSON.stringify(data));               
        // Update UI
        log('保存成功!');
        // ReLoad entries
        loadEntries($('dayselection').value);
        // Recovery current entry
        curIndex --;
        showNext();
    }
}

function deleteEntry()
{
    var currentEntry = entries[curIndex];
    if (currentEntry)
    {
        localStorage.removeItem(currentEntry.time);
        // Update UI
        log('删除成功!');
        // Reload entries
        loadEntries($('dayselection').value);
        // Go to next entry
        curIndex --;
        showNext();
    }
}

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

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

        log('总共' entries.length '个, 当前第' (curIndex 1) '个');
    }
}

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

        log('总共' entries.length '个, 当前第' (curIndex 1) '个');
    }
}

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

function clearTextarea()
{
    $('en').value = '';
    $('zh').value = '';
}

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

function log(msg)
{
    var target = document.getElementById('msg');
    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></pre>
html5 storage 数据

0 人点赞