33. 本地记事本

本地记事本

html部分

css部分

*{
    margin: 0;
    padding: 0;
}
body{
    background-color: #7bdaf3;
    display: flex;
    padding-top: 3rem;
    flex-wrap: wrap;
}
.add{
    position: fixed;
    top: 1rem;
    right: 1rem;
    background-color: #9ec862;
    color: #fff;
    border: none;
    border-radius: 3px;
    padding: 0.5rem 1rem;
    cursor: pointer;
}
.add:active{
    transform: scale(0.98);
}
.note{
    background-color: #fff;
    box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1);
    margin: 30px 20px;
    height: 400px;
    width: 400px;
}
.tools{
    background-color: #9ec862;
    display: flex;
    justify-content: flex-end;
    padding: .5rem;
}
.tools button{
    background-color: transparent;
    border: none;
    color: #fff;
    cursor: pointer;font-size: 1rem;
    margin-left: .5rem;
}
textarea{
    outline: none;
    font-size: 1.2rem;
    border: none;
    height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px;
    display: block;
    width: 95%;
}

js部分

const add = document.querySelector(".add")


init_dom()
add.addEventListener("click", function () {
    const body = document.body;
    body.appendChild(create_note())
})

// 初始化dom    
function init_dom() {
    const body = document.body
    for (let i = 0; i < localStorage.length; i++) {
        const dom = localStorage.getItem(localStorage.key(i));
        if (dom) {
            const div = document.createElement("div");
            div.innerHTML = dom;

            const note = div.children[0];
            const edit = note.querySelector(".edit");
            const del = note.querySelector(".delete");
            const text = note.querySelector("textarea");
            text.innerHTML = text.getAttribute("value");

            body.appendChild(note); // Append the newly created note to the body
            event_dom(edit);
            event_dom(del);
            event_dom(text, 1);
        }
    }
}

// 添加记事本
function create_note() {
    const note = document.createElement("div")
    note.classList.add("note");
    note.dataset.id = Math.floor(Math.random() * 10000000000)

    const tools = document.createElement("div")
    tools.classList.add("tools");

    const edit = document.createElement("button")
    edit.classList.add("edit");
    event_dom(edit)
    edit.dataset.type = "edit"

    const del = document.createElement("button")
    del.classList.add("delete");
    event_dom(del)
    del.dataset.type = "del"

    const i_edit = document.createElement("i")
    i_edit.className = "iconfont icon-bianji"

    const i_del = document.createElement("i")
    i_del.className = "iconfont icon-shanchu"

    const textarea = document.createElement("textarea")
    textarea.setAttribute("readonly", "true")
    event_dom(textarea, 1)

    edit.appendChild(i_edit)
    del.appendChild(i_del)
    tools.appendChild(edit)
    tools.appendChild(del)
    note.appendChild(tools)
    note.appendChild(textarea)
    return note
}

// 给新成的dom绑定事件,已经执行各种操作
function event_dom(dom, index = 0) {
    dom.addEventListener("click", function (e) {
        const { type } = this.dataset
        const note = this.parentNode.parentNode
        if (type == "del") {
            note.remove()
            const local = localStorage.getItem(`dom-${note.dataset.id}`)
            if (local) {
                localStorage.removeItem(`dom-${note.dataset.id}`)
            }

        } else {
            const text = note.children[1]
            text.removeAttribute("readonly")
            text.focus()
        }
    })
    if (index == 1) {
        dom.addEventListener("input", function (e) {
            const note = this.parentNode
            console.log(this);
            console.log(e.target.value);
            this.setAttribute("value", e.target.value)
            console.log(this);
            localStorage.setItem(`dom-${note.dataset.id}`, note.outerHTML)
        })
    }
}

效果