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"
*/