使用 HTML5 本地存储存储列表项<ul>

我正在创建一个基本的待办事项列表，想知道如何存储我的列表，以便当用户返回页面或意外刷新浏览器窗口时，该列表仍然可用？

html

<!DOCTYPE html>
<html>
    <head>
        <title>My To-Do List</title>
        <link rel="stylesheet" href="css/styles.css" />
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="css/font-awesome-animation.min.css">
        <link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
        <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
        <link rel="icon" href="/favicon.ico" type="image/x-icon">
    </head>
    <body>
        <div id="page">
            <header>
                <img src="images/checklist.png" alt="some_text">
            </header>
             <h2>MY TO-DO LIST</h2>
            <ul id="sortable"></ul>
            <form id="newItemForm">
                <input type="text" id="itemDescription" placeholder="Add Description" maxlength="40" />
                <input type="submit" id="add" value="add" />
                <div id="double">Drag and drop to rearrange items
                    <br />Click on an item to remove it</div>
            </form>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="js/main.js"></script>
        <script src="js/sort.js"></script>
        <script src="jquery-ui/jquery-ui.js"></script>
    </body>
</html>

JavaScript/jQuery

$(function () {
    var $list;
    var $newItemForm;
    var $newItemButton;
    var item = '';
    $list = $('ul');
    $newItemForm = $('#newItemForm');
    $newItemButton = $('#newItemButton');
    // ADDING A NEW LIST ITEM
    $newItemForm.on('submit', function (e) {
        e.preventDefault();
        var text = $('input:text').val();
        $list.append('<li>' + text + '</li>');
        $('input:text').val('');
    });
    $list.on('click', 'li', function () {
        var $this = $(this);
        var complete = $this.hasClass('complete');
        if (complete === true) {
            $this.animate({}, 500, 'swing', function () {
                $this.remove();
            });
        } else {
            item = $this.text();
            $this.remove();
        }
    });
});
localStorage.setItem($list);
//add animations when you learn how to...

您还需要将数据保存在对象中。目前它只在DOM中。添加新todo或编辑现有todo时，需要将其保存到本地存储中。将DOM节点存储到localStorage不起作用。localStorage也只接受字符串值。

这就是我如何更改你的代码：

// localStorage key
var lsKey = 'TODO_LIST';
// keeping data
var todoList = {};
function getSavedData () {
    var fromLs = localstorage.getItem( lsKey );
    if ( !! fromLs ) {
        todoList = JSON.parse( fromLs );
    } else {
        todoList = {};
        localstorage.setItem( lsKey, todoList );
    };
};
function saveData () {
    var stringify = JSON.stringify( todoList );
    localstorage.setItem( lsKey, todoList );
};
$newItemForm.on('submit', function(e) {
    e.preventDefault();
    var text = $('input:text').val().trim(),
        uuid = new Date.now();
    // lets use input[type:checkbox] to determine if complete or not
    if ( !! text ) {
        todoList[uuid] = text;
        $list.append('<li><input type="checkbox" id=' + uuid + ' /> ' + text + '</li>');
        $( 'input:text' ).val( '' );
    };
};
$list.on('change', 'li input', function() {
    var uuid = $(this).attr( 'id' ),
        $li  = $(this).parent();
    if ( $(this).prop('checked') ) {
        todoList[uuid] = undefined;
        delete todoList[uuid];
        saveData();
        $li.fadeOut("slow", function() {
            $this.remove();
        };
    };
});

祝你好运，玩得开心！

您必须做两件事：第一件事是存储您的数据，而不是html。第二件事是，您必须在localStorage中为项目提供一个名称，因为这是一个键/值存储，所以它需要一个键的名称。另外，因为localStorage将所有数据存储为一个字符串值，所以在处理数据之前，请对数据调用JSON.stringify()。因此，您的代码将是这样的：localStorage.setItem("yourKeyName", JSON.stringify(yourDataObj))。当您想从中读取数据时，执行JSON.parse(localStorage.getItem("yourKeyName"))以将数据作为json对象

相关内容

最新更新

热门标签：