Javascript 从本地存储中删除特定项_Javascript_Jquery_Html_Webkit_Local Storage

Javascript 从本地存储中删除特定项

javascript jquery html

Javascript 从本地存储中删除特定项,javascript,jquery,html,webkit,local-storage,Javascript,Jquery,Html,Webkit,Local Storage,我有一个我正在做的笔记应用程序。它看起来像谷歌保持它将每个便笺保存在本地存储器中我想给每个笔记添加一个删除选项（类似于Keep），但不知道该怎么做完整的代码在我的Github页面上 HTML: <!doctype html> <html> <head> <title>Notes</title> <link href="styles/normalize.css" rel="stylesheet" />

我有一个我正在做的笔记应用程序。它看起来像谷歌保持

它将每个便笺保存在本地存储器中

我想给每个笔记添加一个删除选项（类似于Keep），但不知道该怎么做

完整的代码在我的Github页面上

HTML:

<!doctype html>
<html>
<head>
    <title>Notes</title>
    <link href="styles/normalize.css" rel="stylesheet" />
    <link href="styles/main.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="window.css">
</head>
<script>

        var nw = require('nw.gui');
        var win = nw.Window.get();
        win.isMaximized = false;
    </script>

<body id="gui">
    <header class="app-header">
      <ul style="margin-top:0.3px">
    <li><a href='#' title='Close' id='windowControlClose'></a></li>
    <li><a href='#' title='Maximize' id='windowControlMaximize'></a></li>
    <li><a href='#' title='Minimize' id='windowControlMinimize'></a></li>
  </ul>

  <h2 style="margin-top: 10px;margin-left: 20px;color: #fff;">Notes</h2>

    </header>

    <section class="main-section">
        <article class="note add-note">
                <h1 class="note-title"></h1>
                <p class="note-content">Add a note</p>
        </article>
    </section>
    <script src="js/jquery.js"></script>
    <script src="js/main.js"></script>

<script>


        // Min
        document.getElementById('windowControlMinimize').onclick = function()
        {
            win.minimize();
        };

        // Close
        document.getElementById('windowControlClose').onclick = function()
        {
            win.close();
            gui.App.closeAllWindows();
        };

        // Max
        document.getElementById('windowControlMaximize').onclick = function()
        {
            if (win.isMaximized)
                win.unmaximize();
            else
                win.maximize();
        };

        win.on('maximize', function(){
            win.isMaximized = true;
        });

        win.on('unmaximize', function(){
            win.isMaximized = false;
        });


    </script> 

</body>
</html>


笔记
var nw=require（'nw.gui'）；
var win=nw.Window.get（）；
win.isMaximized=false；





笔记
添加注释
//闵
document.getElementById（'windowControlMinimize'）。onclick=function（）
{
win.minimize（）；
};
//接近
document.getElementById（'windowControlClose'）。onclick=function（）
{
win.close（）；
gui.App.closeAllWindows（）；
};
//马克斯
document.getElementById（'windowControlMaximize'）。onclick=function（）
{
如果（win.isMaximized）
win.unmaxize（）；
其他的
赢。最大化（）；
};
win.on（'maximize'，function（）{
win.isMaximized=true；
});
win.on（'unmaxize'，function（）{
win.isMaximized=false；
});

Javascript:Main.js

    var Strings = {
    'en-us': {
        DEFAULT_TITLE: "Title",
        ADD_NOTE: "Add a note",
        SEARCH_PLACEHOLDER: "Search Jin's Keep"
    }
};

var Lang = Strings['en-us'];

var Keys = {
    ENTER: 10
}

var notes;



function Note(title, content, id) {
    Note.numInstances = (Note.numInstances || 0) + 1;
    this.id = id ? id : Note.numInstances
    this.title = title;
    this.content = content;
}

Note.prototype.render = function(index) {
        var elem = $('<article class="note" data-index="' + index + '"><h1 class="note-title">' + this.title + '</h1><p class="note-content">' + this.content + '</p></article>');
        $(".add-note").after(elem);
}

Note.prototype.toJSON = function() { 
    return {
        id: this.id,
        title: this.title,
        content: this.content
    };
}

function createNote() {
    var elem = $(".add-note");
    var title = elem.find(".note-title");
    var content = elem.find(".note-content");

    elem.removeClass("active");
    title.hide();

    if(title.text() != Lang.DEFAULT_TITLE || content.text() != Lang.ADD_NOTE) {
        var id = notes ? notes.length+1 : 1;
        var note = new Note(title.text(), content.text(), id);
        notes.push(note);
        note.render(notes.length-1);

        title.text(Lang.DEFAULT_TITLE);
        content.text(Lang.ADD_NOTE);
        saveNotes();
    }
}


function activateNote(note) {
    var title = note.find(".note-title");
    note.addClass("active");
    title.show();
    if(isEmpty(title.text())) {
        title.text(Lang.DEFAULT_TITLE);
    }
}

function saveCurrentNote() {
    var noteElement = $(".note.active");
    if(noteElement) {
        console.log("will save this element: ", noteElement[0]);
        var noteIndex = noteElement.attr("data-index");

        var note = notes[noteIndex];
        note.title = noteElement.find(".note-title").text();
        note.content = noteElement.find(".note-content").text();

        saveNotes();

        deactivateCurrentNote(noteElement);
    }
}

function deactivateCurrentNote(note) {
    note.removeClass("active");
    var title = note.find(".note-title");
    if(isEmpty(title.text()) || title.text() == Lang.DEFAULT_TITLE) {
        title.hide();
    }

    $(":focus").blur();
}

function isEmpty(string) {
    return string.replace(/\s|&nbsp;/g, '').length == 0;
}

function addTabIndex() {
    tabIndex = 3;
    $(".note .note-content, .note .note-title").each(function() {
        var el = $(this);
        el.attr("tabindex", tabIndex++);
    });
}


function loadNotes() {
    var rawObjects = JSON.parse(localStorage.getItem("notes"));
    if(rawObjects && rawObjects.length) {
        rawObjects.forEach(function(obj, index) {
            obj.__proto__ = Note.prototype;
            obj.render(index);
        });
        return rawObjects;  
    } else {
        console.warn("Couldn't load any note because local storage is empty.");
        return [];
    }
}

function saveNotes() {
    localStorage.setItem("notes", JSON.stringify(notes))
}


$(document).ready(function() {
    notes = loadNotes();
    addTabIndex();

    $(".note").each(function() {
        var note = $(this);
        var title = note.find(".note-title");
        if(isEmpty(title.text()) || title.text() == Lang.DEFAULT_TITLE  ) {
            title.hide();
        }
    });

    $(".main-section").on("click", ".note .note-content, .note .note-title", function(evt) {
        var note = $(this).parent();
        activateNote(note);
        //console.log('2 - Setting content editable to true', evt);
        var noteSection = $(this);
        noteSection.prop("contentEditable", true);
    });

    $(".main-section").on("click", ".note .note-title", function(evt) {
        //console.log("3 - Clearing TITLE's text");
        var title = $(this);
        if(title.text() == Lang.DEFAULT_TITLE) {
            title.text("");
        }
    });

    $(".main-section").on("click", ".note .note-content", function(evt) {
        //console.log('4 - Clearing CONTENT text', evt);
        var content = $(this);
        if(content.text() == Lang.ADD_NOTE) {
            content.text("");
            content.focus();
        }
    });

    $(".main-section").on("click", function(evt) {
        if(evt.target == this) {
            //console.log('5', evt);
            var currentNote = $(".note.active");
            if(currentNote.length) {
                //console.log('5.a');
                if(currentNote.hasClass("add-note")) {
                    console.log('5 - Creating a new note');
                    createNote();
                } else {
                    console.log('5 - Saving current note');
                    saveCurrentNote();  
                }

                if(currentNote.find(".note-title").text() == Lang.DEFAULT_TITLE) {
                    currentNote.find(".note-title").hide();
                }
            }
        } 
    });

    $(".main-section").on("keypress", ".note .note-content, .note .note-title", function(evt) {
        var currentNote = $(".note.active");
        console.log('6');
        if(evt.which == Keys.ENTER && evt.ctrlKey) {
            console.log('2');
            if(currentNote.hasClass("add-note")) {
                createNote();
            } else {
                saveCurrentNote();  
            }
        }
    });
});

var字符串={
“恩我们”{
默认标题：“标题”，
添加注释：“添加注释”，
搜索占位符：“搜索金的要塞”
}
};
var Lang=Strings['en-us']；
变量键={
输入：10
}
var票据；
功能说明（标题、内容、id）{
Note.numInstances=（Note.numInstances | | 0）+1；
this.id=id？id:Note.numInstances
this.title=标题；
this.content=内容；
}
Note.prototype.render=函数（索引）{
var elem=$（''+this.title+''+this.content+''）；
元（“.add note”）。在（elem）之后；
}
Note.prototype.toJSON=function（）{
返回{
id:this.id，
标题：这个，
content:this.content
};
}
函数createNote（）{
变量元素=$（“.add note”）；
var title=元素查找（“注释标题”）；
var内容=元素查找（“注释内容”）；
元素移除类（“活动”）；
title.hide（）；
if（title.text（）！=Lang.DEFAULT|title|content.text（）！=Lang.ADD|NOTE）{
变量id=注释？注释。长度+1:1；
var note=新注释（title.text（），content.text（），id）；
推（注）；
注释.渲染（注释.长度-1）；
title.text（Lang.DEFAULT_title）；
content.text（Lang.ADD_注释）；
saveNotes（）；
}
}
功能激活剂（注）{
var title=注释。查找（“.note title”）；
注：addClass（“活动”）；
title.show（）；
if（isEmpty（title.text（）））{
title.text（Lang.DEFAULT_title）；
}
}
函数saveCurrentNote（）{
var notelement=$（“.note.active”）；
if（notelement）{
log（“将保存此元素：”，notelement[0]）；
var noteIndex=notelement.attr（“数据索引”）；
var注释=注释[注释索引]；
note.title=notelement.find（“.note title”）.text（）；
note.content=notelement.find（“.note content”）.text（）；
saveNotes（）；
停用当前注释（noteElement）；
}
}
函数停用当前注释（注释）{
注：removeClass（“活动”）；
var title=注释。查找（“.note title”）；
if（isEmpty（title.text（））| | title.text（）==Lang.DEFAULT_title）{
title.hide（）；
}
$（“：focus”）.blur（）；
}
函数isEmpty（字符串）{
返回字符串。替换（/\s |/g'）。长度==0；
}
函数addTabIndex（）{
tabIndex=3；
$（“.note.note内容，.note.note标题”）.each（函数（）{
var el=$（本）；
el.attr（“tabindex”，tabindex++）；
});
}
函数loadNotes（）{
var rawObjects=JSON.parse（localStorage.getItem（“notes”）；
if（rawObjects&&rawObjects.length）{
forEach（函数（对象，索引）{
obj.\uuuuuu proto\uuuuuj=Note.prototype；
对象渲染（索引）；
});
返回原始对象；
}否则{
console.warn（“无法加载任何便笺，因为本地存储为空。”）；
返回[]；
}
}
函数saveNotes（）{
setItem（“notes”，JSON.stringify（notes））
}
$（文档）.ready（函数（）{
notes=loadNotes（）；
addTabIndex（）；
$（“.note”）。每个（函数（）{
var注释=$（本）；
var title=注释。查找（“.note title”）；
if（isEmpty（title.text（））| | title.text（）==Lang.DEFAULT_title）{
title.hide（）；
}
});
$（“.main section”）。在（“单击”、“.note.note内容、.note.note标题”功能上（evt）{
var note=$（this.parent（）；
活性烯醇（注）；
//console.log（'2-将可编辑内容设置为true'，evt）；
var noteSection=$（此）；
noteSection.prop（“contentEditable”，true）；
});
$（“.main section”）。在（“单击“，”.note.note title），函数（evt）{
//console.log（“3-清除标题文本”）；
var title=$（本）；
if（title.text（）==Lang.DEFAULT\u title）{
标题.正文（“”）；
}
});
$（“.main section”）。在（“单击“，”.note.note content“，函数（evt）{
//日志（'4-清除内容文本'，evt）；
var content=$（此值）；
if（content.text（）==Lang.ADD_注释）{
内容。文本（“”）；
content.focus（）；
}
});
$（“.main section”）。在（“单击”，函数（evt）{
如果（evt.target==此）{
//控制台日志（'5'，evt）；
var currentNote=$（“.note.active”）；
if（当前注释长度）{
//console.log（'5.a'）；
if（currentNote.hasClass（“添加注释”））{
console.log（'5-创建新注释'）；
createNote（）；
}否则{
控制台
<button class="delete" data-id="1">Delete note</button>

$(document).on('click', '.delete', function () {
  var id = $(this).data('id');
  removeNote(id);
});

function removeNote(id) {
  localStorage.removeItem(id);
}