How to add,edit and delete key-value in localStorage of Browse

最新推荐文章于 2020-10-19 18:29:46 发布

zhengzizhi

最新推荐文章于 2020-10-19 18:29:46 发布

阅读量356

点赞数

分类专栏： HTML/CSS/javascript

本文链接：https://blog.csdn.net/zhengzizhi/article/details/79163107

版权

HTML/CSS/javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>How to add,edit and delete key-value in localStorage of Browse</title>
        <link rel="stylesheet" href="app.css">
    </head>
    <body>
        <h1>How to add,edit and delete key-value in localStorage of Browse</h1>
        <form id="add-form">
            <input id="name" placeholder="name">
            <input id="contact" placeholder="contact">
            <input id="note" placeholder="note">
            <button type="submit">add</button>
        </form>
        <table id="list-table">
            <thead>
            <th>
                name
            </th>
            <th>
                contact
            </th>
            <th colspan="2">
                note
            </th>
        </thead>
   
    </table>
    <script src="app.js">

    </script>
</body>
</html>

app.css

*{
    box-sizing: border-box;
}
html{
    font-family: Helvetica,Arial,sans-serif;
    background: #eee;
}
body{
    border: 1px solid #ddd;
    background: #fff;
    max-width: 800px;
    margin: 2rem auto;
    padding: 2rem;
}

h1{
    border-bottom: 1px solid #eee;
    margin-bottom: 2rem;
}

form{
    margin: 2rem 0;
}

input{
    display: block;
    width:100%;
    padding: .5em 1em;
    margin: 1rem 0;
    font:inherit;
}

button {
    border: 0;
    padding: .5em 1em;
    font:inherit;
    border-radius: 1em;
}

table{
    width: 100%;
}

td,th{
    border-collapse: collapse;
    border: 1px solid #f3f3f3;
    border-width: 1px 0;
    padding: .5em 1em;
}

th{
    border-bottom: 2px solid #aaa;
    text-align: left;
}

table .action {
    border:0;
    white-space: nowrap;
}

table input,
table textarea {
    margin: 0;
}

table textarea {
    resize: none;
    min-width: 300px;
    height: 4em;
}

/*
    <tr>
       <td>
           Charlie
       </td>
       <td>
           charlie@example.com
       </td>
       <td>
           We meet at Peter's pool party in May 2016
       </td>
       <td class="actions">
           <a href="#" data-action="edit">edit</a>|
           <a href="#" data-action="delete">delete</a>
       </td>
   </tr>
   <tr>
       <td>Sam</td>
       <td>@samtweets</td>
       <td>Charlie's partner</td>
       <td class="actions">
           <a href="#" data-action="edit">edit</a>|
           <a href="#" data-action="delete">delete</a>
       </td>
   </tr>
*/

app.js

//console.log('hello world')
var $form = document.querySelector('#add-form')
var $table = document.querySelector('#list-table')

var contacts = JSON.parse(localStorage.getItem('contacts') || '[]')
contacts.forEach(function (contact) {
    var $row = document.createElement('tr')
    $row.dataset.id = contact.id  //  localStorage.clear()
    $row.innerHTML = `
        <td>${contact.name}</td>
        <td>${contact.contact}</td>
        <td>${contact.note}</td>
        <td class="actions">
            <a href="#" data-action="edit">edit</a>|
            <a href="#" data-action="delete">delete</a>
        </td>
    `
    $table.appendChild($row)
})

// contacts[0]['name']

$form.addEventListener('submit', function (event) {
    event.preventDefault()
    var id = Math.random().toString(36).substr(2, 7)
    var name = document.querySelector('#name').value
    var contact = document.querySelector('#contact').value
    var note = document.querySelector('#note').value
    var $row = document.createElement('tr')
    $row.dataset.id = id

    $row.innerHTML = `
        <td>${name}</td>
        <td>${contact}</td>
        <td>${note}</td>
        <td class="actions">
            <a href="#" data-action="edit">edit</a>|
            <a href="#" data-action="delete">delete</a>
        </td>
    `
    $table.appendChild($row)
    $form.reset()

    contacts.push({
        id: id,
        name: name,
        contact:contact,
        note:note
    })
    localStorage.setItem('contacts', JSON.stringify(contacts))
})


$table.addEventListener('click', function (event) {
    event.preventDefault()

    var $button = event.target
    var $row = $button.closest('tr')
    var id = $row.dataset.id
    var action = $button.dataset.action

    if (action === 'delete') {
        contacts = contacts.filter(function (contact) {
            return contact.id !== id
        })
        localStorage.setItem('contacts', JSON.stringify(contacts))
        $row.remove()
    }

    if (action === 'edit') {
        var $cells = $row.querySelectorAll('td')
        var name = $cells[0].textContent.trim()
        var contact = $cells[1].textContent.trim()
        var note = $cells[2].textContent.trim()

        $row.innerHTML = `
        <td><input value="${name}" data-original="${name}"></td>
        <td><input value="${contact}" data-original="${contact}"></td>
        <td><textarea data-original="${note}">${note}</textarea></td>
        <td class="actions">
            <button data-action="save">save</button>
            <a href="#" data-action="cancel">cancel</a>
        </td>
    `
    }

    if (action === 'save') {
        var $inputs = $row.querySelectorAll('input,textarea')
        var name = $inputs[0].value
        var contact = $inputs[1].value
        var note = $inputs[2].value

        $row.innerHTML = `
        <td>${name}</td>
        <td>${contact}</td>
        <td>${note}</td>
        <td class="actions">
            <a href="#" data-action="edit">edit</a>|
            <a href="#" data-action="delete">delete</a>
        </td>
    `
        contacts.forEach(function(contactItem){
            debugger
            if (contactItem.id === id){
                contactItem.name = name
                contactItem.contact = contact
                contactItem.note = note
            }
        })
        localStorage.setItem('contacts', JSON.stringify(contacts))
    }

    if (action === 'cancel') {
        var $inputs = $row.querySelectorAll('input,textarea')
        var name = $inputs[0].dataset.original
        var contact = $inputs[1].dataset.original
        var note = $inputs[2].dataset.original

        $row.innerHTML = `
        <td>${name}</td>
        <td>${contact}</td>
        <td>${note}</td>
        <td class="actions">
            <a href="#" data-action="edit">edit</a>|
            <a href="#" data-action="delete">delete</a>
        </td>
    `
    }

})

/*
 localStorage.clear()
 localStorage.setItem('contacts','our contacts data here')
 localStorage.getItem('contacts')  // "our contacts data here"
 contacts = [{name:"Charlie",contact:"charlie@example.com",note:"We meet at Peter's pool party in May 2016"},
 {name:"Sam",contact:"@samtweets",note:"Charlie's partner"}]
 
 localStorage.setItem('contacts',contacts)
 localStorage.getItem('contacts')  //  "[object Object],[object Object]"       It can not do this
 
 
 JSON.stringify([10])  // "[10]"
 JSON.parse('[10]') // [10]
 array = JSON.parse('[10]') // array = [10]  array.length = 1  array[0] = 10
 
 JSON.stringify(contacts)    //   "[{"name":"Charlie","contact":"charlie@example.com","note":"We meet at Peter's pool party in May 2016"},{"name":"Sam","contact":"@samtweets","note":"Charlie's partner"}]"
 localStorage.setItem('contacts',JSON.stringify(contacts))
 localStorage.getItem('contacts')  //   "[{"name":"Charlie","contact":"charlie@example.com","note":"We meet at Peter's pool party in May 2016"},{"name":"Sam","contact":"@samtweets","note":"Charlie's partner"}]"
 JSON.parse(localStorage.getItem('contacts'))
 // (2) [{…}, {…}]
 0:{name: "Charlie", contact: "charlie@example.com", note: "We meet at Peter's pool party in May 2016"}
 1:{name: "Sam", contact: "@samtweets", note: "Charlie's partner"}
 length:2
 __proto__
 :Array(0)
 
 
 rnd = Math.random().toString(36) //  "0.4jgfmqktric"
 rnd.substr(2,7)  //  "4jgfmqk"
 
 */

zhengzizhi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
How to add,edit and delete key-value in localStorage of Browse

index.html How to add,edit and delete key-value in localStorage of Browse How to add,edit and delete key-value in localStorage of Browse
复制链接

扫一扫

专栏目录