新建便利贴，添加备忘录并使用localStorage存储

本文为博主原创文章，未经博主允许不得转载，博主空间https://blog.youkuaiyun.com/S_clifftop @13805064305

本文链接：https://blog.youkuaiyun.com/S_clifftop/article/details/73195564

本文介绍了一种使用HTML、CSS和JavaScript结合localStorage实现的网页版便利贴应用。该应用允许用户创建、编辑、删除便利贴，并能自动保存内容。通过简单的用户界面，展示了如何在前端存储和读取数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

此代码是在网页上建立便利贴，把所要做的内容记下，并使用localStorage存储，下面是源代码，分三块内容，Notes.html、notes.css、operateNotes.js（未用jQuery，如果需要我可以改一下），开整！！

新建网页，并设置一下简单页面布局

<!--Notes.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="gbk">
        <title>我的备忘录</title>
    <link rel="stylesheet" href="notes.css" />
    <script src="operateNotes.js"></script>
</head>
<body>
    <input type="button" value="新增便利贴" id="addNote"/>
    <input type="button" value="清除所有便利贴" id="removeAllNote">
    <hr />
</body>
</html>

使用css对页面进行美化

.note {
    width: 180px;
    height: 170px;
    background-color: #6F9;
    box-shadow: 2px 5px 5px gray;
    float: left;
    margin: 5px;
    position: absolute;
}
.noteTitle {
    width: 180px;
    height: 24px;
    background-color: #3F6;
}
.noteContent {
    width: 160px;
    height: 136px;
    padding: 5px 10px 5px 10px;
}
.addIcon {
    display: block;
    float: left;
    padding: 4px;
}
.delIcon {
    display: block;
    float: right;
    padding: 4px;
}
body > .note:nth-child(even) {
    -webkit-transform: rotate(2deg);
    -moz-transform: rotate(2deg);
    -o-transform: rotate(2deg);
    -ms-transform: rotate(2deg);
    transform: rotate(2deg);
}
body > .note:nth-child(odd) {
    -webkit-transform: rotate(-1deg);
    -moz-transform: rotate(-1deg);
    -o-transform: rotate(-1deg);
    -ms-transform: rotate(-1deg);
    transform: rotate(-1deg);
}
body > .note:nth-child(3n) {
    -webkit-transform: rotate(1deg);
    -moz-transform: rotate(1deg);
    -o-transform: rotate(1deg);
    -ms-transform: rotate(1deg);
    transform: rotate(1deg);
}
body > .note:hover {
    -webkit-box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.4);
    -o-box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.4);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    z-index: 10;
    background-color: #6C6;
}

注意：CSS3:nth-child(x) 选择器见此文章
http://blog.youkuaiyun.com/s_clifftop/article/details/73196277

添加对便利贴新建和内容存储、加载等一系列方法


//operateNotes.js

var divTop = 50;
var divLeft = 0;
var k = 0;
//建立便利贴
function addNote(key, value) {
    var id;
    if (!!key) {
        id = key;
    }
    else {
        //id使用自1970年1月1日0时以来的毫秒数。
        id = new Date().getTime();
    }
    //便利贴的位置
    if (divLeft != 0) {
        divLeft += 200; //100 + (200 * k);
        if (divLeft >= 1200) {
            divTop += 200;
            divLeft = 50;
        }
    }
    else {
        divLeft = 50;
    }
    //建立便利贴
    var mainDiv = document.createElement("div");
    mainDiv.setAttribute("class", "note");
    mainDiv.setAttribute("id", id);
    mainDiv.setAttribute("style", "top:" + divTop + "px;left:" + divLeft + "px");

    //建立便利贴的Title
    var titleDiv = document.createElement("div");
    titleDiv.setAttribute("class", "noteTitle");

    //建立新增图示
    var addImg = document.createElement("img");
    addImg.setAttribute("src", "images/icon-add.png");
    addImg.setAttribute("class", "addIcon");
    //新增便利贴
    addImg.setAttribute("onclick", "addNote()");

    titleDiv.appendChild(addImg);

    //建立刪除图示
    var delImg = document.createElement("img");
    delImg.setAttribute("src", "images/icon-delete.png");
    delImg.setAttribute("class", "delIcon");
    //删除便利贴
    delImg.setAttribute("onclick", "deleteNote('" + id + "')");
    titleDiv.appendChild(delImg);

    //建立便利贴的內容
    var contentDiv = document.createElement("div");
    if (!!value) {
        var txtDiv = document.createTextNode(value);
        contentDiv.appendChild(txtDiv);
    }
    contentDiv.setAttribute("class", "noteContent");
    contentDiv.setAttribute("contenteditable", "true");  
    //当失去焦点会调用saveNote（）方法
    //使用saveNote(id)的方法来存储便利贴的內容
    contentDiv.setAttribute("onblur", "saveNote('" + id + "')");

    mainDiv.appendChild(titleDiv);
    mainDiv.appendChild(contentDiv);

    document.body.appendChild(mainDiv);
}

//移动便利贴
var dragObj;
var _startX = 0;           
var _startY = 0;
var _offsetX = 0;           
var _offsetY = 0;
var z = 0;
function mousedownHandler(e) {
    if (e.target.parentNode.className == 'note') {
        dragObj = e.target.parentNode;
        var t = dragObj.style.top;
        var l = dragObj.style.left;
        z += 1;
        dragObj.setAttribute("style", "top:" + t + ";left:" + l + ";z-index:" + z);

        _startX = e.clientX;
        _startY = e.clientY;
        _offsetX = dragObj.offsetLeft;
        _offsetY = dragObj.offsetTop;

        document.addEventListener("mousemove", mousemoveHandler, false);
    }
}
//储存便利贴的方法
function saveNote(key) {
    var obj = document.getElementById(key);
    var value = obj.childNodes[1].firstChild.nodeValue;
    if (value.length > 0) {
        //保存输入的内容
        localStorage.setItem(key,value);
    }
}

//关闭网页后再登陆会自动加载便利贴的方法
function loadData() {
    //读取key,value，并传给方法addNote
   for(var i=0;i<localStorage.length;i++) {
        var key=localStorage.key(i);
        var value=localStorage.getItem(key);
       addNote(key, value);
   }

}
//删除便利贴的方法
function deleteNote(key) {
    var obj = document.getElementById(key);
    obj.parentNode.removeChild(obj);
    //当点击X按钮时，删除该便利贴及localStorage的内容
    localStorage.removeItem(key);
}
//清除所有便利贴及存储在localStorage的内容的方法
function deleteNotesAll() {
    localStorage.clear();
    //删除后刷新
    location.reload();
}
function mouseupHandler(e) {
    document.removeEventListener("mousemove", mousemoveHandler, false);
}
function mousemoveHandler(e) {
    dragObj.style.left = (_offsetX + e.clientX - _startX) + 'px';
    dragObj.style.top = (_offsetY + e.clientY - _startY) + 'px';
}
window.addEventListener("load", init, false);
function init() {
    //按下新增便利贴按钮
    var btnNote = document.getElementById("addNote");
    btnNote.addEventListener("click", function () { addNote(); }, false);
    //按下清除所有便利贴按钮
    var btnRemove = document.getElementById("removeAllNote");
    btnRemove.addEventListener("click", function () { deleteNotesAll();  }, false);

    loadData();
    //添加移动便利贴的监听事件
    document.addEventListener("mousedown", mousedownHandler, false);
    document.addEventListener("mouseup", mouseupHandler, false);
}

上面就是建立保存便利贴的代码，需要的可以拿去学习。

接下来是我想说的几点：
1、便利贴使用localStorage存储内容，它没有时间限制，关闭网页后再次打开会自动加载内容，解决了cookie空间不足的缺点。但是尽量不要添加太多内容，内容太多会使网页变卡（目前还没遇到）
2、先运行一下，图片没有放上，文字可能会出现乱码（改变“Notes.html”中的charset即可解决），但功能是可以实现的，顶部左侧按钮为添加，右侧为删除全部便利贴，便利贴左上角为新增，右上角为删除本便利贴
3、可以使用Webkit内核的浏览器查看已存储的内容是否存在或被删除
4、没了

添加便利贴后的截图如下：
这里写图片描述