续上github那几个小项目，接着来
记账本数据在本地存储中
Window.localStorage
只读的localStorage 属性允许你访问一个Document 源（origin）的对象 Storage；存储的数据将保存在浏览器会话中。localStorage 类似 sessionStorage，但其区别在于：存储在localStorage的数据可以长期保留；而当页面会话结束——也就是说，当页面被关闭时，存储在 sessionStorage 的数据会被清除 。
另外，localStorage 中的键值对总是以字符串的形式存储。 (需要注意, 和js对象相比, 键值对总是以字符串的形式存储意味着数值类型会自动转化为字符串类型).
保存数据语法：
localStorage.setItem('key', 'value');
读取数据语法：
var value = localStorage.getItem("key");
删除数据语法：
localStorage.removeItem("key");
清空数据：
localStorage.clear();
记账本
将数据记录在本地存储中，关闭页面或者刷新浏览器也不会丢失。
html代码
<body>
<h2>Expense Tracker</h2>
<div class="container">
<h4>YOUR BALANCE</h4>
<h1 id="balance">$0.00</h1>
<div class="inc-exp-container">
<div class="income">
<h4>INCOME</h4>
<p class="money money-ld">$0.00</p>
</div>
<div class="expense">
<h4>EXPENSE</h4>
<p class="money money-rd">$0.00</p>
</div>
</div>
<h3>History</h3>
<ul id="list" class="list">
</ul>
<h3>Add new transaction</h3>
<form class="form">
<div class="form-tb">
<label for="text">Text</label>
<input type="text" placeholder="Enter text..." id="text">
</div>
<div class="form-db">
<label for="amount">AmountAmount <br />
(negative - expense, positive - income)</label>
<input type="number" placeholder="Enter amount..." id="amount">
</div>
<button class="btn">Add transaction</button>
</form>
</div>
<script src="script.js"></script>
</body>
css代码
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #f7f7f7;
}
h2 {
margin: 20px 0;
}
.container {
width: 350px;
margin: 30px auto;
}
h1 {
letter-spacing: 1px;
}
.inc-exp-container {
display: flex;
justify-content: space-between;
margin: 20px 0;
padding: 20px;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.inc-exp-container>div {
flex: 1;
text-align: center;
}
.inc-exp-container>div:first-of-type {
border-right: 1px solid #dedede;
}
.money {
font-size: 20px;
letter-spacing: 1px;
margin: 5px 0;
}
.money-ld {
color: #2ecc71;
}
.money-rd {
color: #c0392b;
}
h3 {
margin: 40px 0 10px;
padding-bottom: 10px;
border-bottom: 1px #bbb solid;
}
label {
display: inline-block;
margin: 10px 0;
}
input {
border: 1px #dedede solid;
width: 100%;
font-size: 16px;
padding: 10px;
}
.btn {
width: 100%;
background-color: #9c88ff;
border: 0;
padding: 10px;
margin: 10px 0 30px;
color: #fff;
font-size: 16px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.list {
list-style: none;
margin-bottom: 40px;
}
.list li {
background-color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
color: #333;
display: flex;
justify-content: space-between;
position: relative;
padding: 10px;
margin: 10px 0;
}
.list li.plus {
border-right: 5px solid #2ecc71;
}
.list li.minus {
border-right: 5px solid #c0392b;
}
#delete-btn {
cursor: pointer;
background-color: #e74c3c;
border: 0;
color: #fff;
font-size: 20px;
line-height: 20px;
padding: 2px 5px;
position: absolute;
top: 50%;
left: 0;
transform: translate(-100%, -50%);
opacity: 0;
transition: opacity 0.3s ease;
}
.list li:hover #delete-btn {
opacity: 1;
}
js代码
var balance = document.querySelector('#balance')
var moneyInc = document.querySelector('.money-ld')
var moneyExp = document.querySelector('.money-rd')
var list = document.querySelector('#list')
var iptText = document.querySelector('#text')
var iptAmount = document.querySelector('#amount')
var form = document.querySelector('.form')
var localStorageTransactions = JSON.parse(localStorage.getItem('transactions'))
var transactions = localStorage.getItem('transactions') !== null ? localStorageTransactions : []
function generateID() {
return Math.floor(Math.random() * 100000000);
}
function addTransaction(e) {
e.preventDefault();
if (iptText.value.trim() === '' || iptAmount.value.trim() === '') {
alert('please input text and amount!')
} else {
var transaction = {
id: generateID(),
text: text.value,
amount: +amount.value
}
transactions.push(transaction)
addTransactionDOM(transaction)
updateValues()
updateLocalStorage()
iptText.value = ''
iptAmount.value = ''
}
}
function updateLocalStorage() {
localStorage.setItem('transactions', JSON.stringify(transactions))
}
function addTransactionDOM(transaction) {
var sign = transaction.amount < 0 ? '-' : '+'
var item = document.createElement('li')
item.classList.add(transaction.amount < 0 ? 'minus' : 'plus')
item.innerHTML = `${transaction.text}<span>${sign}${Math.abs(transaction.amount)}</span><button id="delete-btn" οnclick="removeTransaction(${transaction.id})">x</button>`
list.append(item)
}
function updateValues() {
var amounts = transactions.map(transaction => transaction.amount)
var total = amounts.reduce((prevalue, item) => prevalue + item, 0).toFixed(2)
var income = amounts.filter(item => item > 0).reduce((prevalue, item) => prevalue + item, 0).toFixed(2)
var expense = (amounts.filter(item => item < 0).reduce((prevalue, item) => prevalue + item, 0) * -1).toFixed(2)
balance.innerHTML = `$${total}`
moneyInc.innerHTML = `$${income}`
moneyExp.innerHTML = `$${expense}`
}
function removeTransaction(id) {
transactions = transactions.filter(transaction => transaction.id !== id)
updateLocalStorage()
init()
}
function init() {
list.innerHTML = ''
transactions.forEach(addTransactionDOM)
updateValues()
}
init()
form.addEventListener('submit', addTransaction)
