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代码

<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)

HTML+CSS+Javascript简易记账本（localStorage）相关推荐

HTML + CSS + Javascript 简易示例
要实现的效果: 页面中有一个表格显示水果的数据. 鼠标移动到表格内,就改变当前行背景色,移动到单价单元格鼠标就变成手型. 单价单元格点击进行编辑,对输入进行容错处理,编辑后计算更新小计和总计. 点击删 ...
前端面试+学习笔记（HTML+CSS+JavaScript+ES6+Vue+NodeJs）
前端面试+学习笔记(HTML+CSS+JavaScript+ES6+Vue+NodeJs) 一. HTML 1. 盒子模型是什么:每个元素被表示为一个矩形的盒子,有四个部分组成:内容(content ...
【Web前端】html+css+javascript
1 HTML 1.1. HTML基本概念 HTML:hyper text markup language 超文本标记语言,就是超出纯文本范畴的语言,其中既可以定义文本也可以定义图片,超链接等等非文本性 ...
HTML+CSS+JavaScript实现登陆注册进入动态相册
本文基于前面博客对HTML,CSS,JavaScript的简单介绍,对一些简单的及基础知进行梳理.如要深入掌握可自行查阅W3scool在线文档,菜鸟教程等网站. 代码及逻辑结构本文不做介绍,代码仅作参 ...
学生信息管理页面HTML+CSS+JavaScript基础开发
简单的学生信息表页面需求分析: HTML代码: <!DOCTYPE html> <html><head><meta charset="utf-8& ...
css的滑动门效果,JS+CSS实现简易实用的滑动门菜单效果
本文实例讲述了JS+CSS实现简易实用的滑动门菜单效果.分享给大家供大家参考.具体如下: 这是一个简洁实用的CSS+JavaScript滑动门导航菜单,写时候,我尽量用最少的代码写出兼容性好的代码,希 ...
BAT及各大互联网公司2014前端笔试面试题：HTML/CSS/JAVASCRIPT
BAT及各大互联网公司2014前端笔试面试题:HTML/CSS/JAVASCRIPT Html篇: 1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Fire ...
网站服务器的极简制作与搭建（HTML5+CSS+javascript+NodeJS）
本文致力于使得较有经验的程序员能够在一天之内了解网站搭建制作的基本知识,尽快制作出可以展示用的demo. 具体地,笔者为了完成大作业,需要搭建一个搜索引擎的网站,仅仅作为展示的demo,并不对原创性 ...
Java项目:嘟嘟校园一卡通系统(java+JSP+Servlet+html+css+JavaScript+JQuery+Ajax+mysql)
源码获取:博客首页 "资源" 里下载! 一.项目简述功能:卡管理,卡消费,卡充值,图书借阅,消费,记录,注销等等功能. 二.项目运行环境配置: Jdk1.8 + Tomcat8 ...