续上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代码
Expense Tracker
"container">
YOUR BALANCE
"balance">$0.00
"inc-exp-container">
"income">
INCOME
"money money-ld">$0.00
"expense">
EXPENSE
"money money-rd">$0.00
History
"list" class="list">
Add new transaction
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}${sign}${Math.abs(transaction.amount)}`
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)