带本地存储的便签

时间:2019-03-21 14:40:47

标签: javascript html css

我正在使用该Codepen https://codepen.io/ravitadi/pen/CsIFL,并且我想为用户添加另一个字段以输入注释的标题。

我是javascript noobie,但似乎无法正确处理。这是添加注释的功能。完整的脚本位于codepen中。

function addNote(){
     var usrInput = $('.txtBox').val();
     //console.log(usrInput);

    if(usrInput.length > 0){
        console.log($(this));
        $('#').removeClass('ntActv');
        addtoSticky(usrInput);
        cnclOvrly();
        //console.log(notes);
    }else{

    }
}


function addtoSticky(note){
    if(note.length > 0){
        console.log(note);
        createSticky(note);
        localStorage.setItem('note_'+note.length, note);
    }
}

function createSticky(text){
    $('#stkyNts').append('<li class="box">'+text+'</li>');
}

我们非常感谢您的帮助。

Codepen

2 个答案:

答案 0 :(得分:2)

在模式框中,在文本区域之前添加另一个标题文本框。

<!-- add this -->
<input type="text" id="title" />
<!-- /add this -->
<textarea class="txtBox"></textarea>

现在,您必须从标题中获取值。在createSticky()函数中:

function createSticky(text) {
  var heading = $("#title").val();
  $('#stkyNts').append('<li class="box"><h3>' + heading + '</h3>'+text+'</li>');
}

然后去:

Apple's documentation

对于扩展功能,请尝试更改方式,heading会在设置和获取时包含在本地存储中。为此,您需要在函数headingaddtoSticky()中包含getStoredNotes()

答案 1 :(得分:0)

我尝试按照您的要求进行更新。

您应该更改保存对象和从本地存储加载对象的方式。

storedNotes = JSON.parse(localStorage.getItem("notes"));

if(current == null) current = [];
        current.push(JSON.stringify(note));
        localStorage.setItem('notes', JSON.stringify(current));

https://codepen.io/viethien/pen/RdqKxM