Question

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

HTML

        var allLines = File.ReadAllLines(@"C:\myfile.text");
        var correctedLines = allLines.Select(l => l.Replace(@"\(", "").Replace(@"\)", ""));
        //now use corrected lines in your code

的JavaScript / jQuery的

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

Answer 1

您还需要将数据保存在对象中。目前它仅在DOM中。您添加新待办事项或编辑现有待办事项的所有内容，您需要将其保存到本地存储。将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();
        };
    };
});

祝你好运，玩得开心！

Answer 2

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

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

2 个答案: