HTML+CSS+Javascript简易记账本（localStorage） |
您所在的位置：网站首页 › 家庭开支怎么记账模板图片 › HTML+CSS+Javascript简易记账本（localStorage） |
HTML+CSS+Javascript简易记账本（localStorage）
|
续上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 YOUR BALANCE $0.00 INCOME$0.00 EXPENSE$0.00 History Add new transaction Text AmountAmount (negative - expense, positive - income) Add transactioncss代码 * { 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 sign}${Math.abs(transaction.amount)} |
【本文地址】
今日新闻 |
推荐新闻 |