// 检测 userAgent(浏览器信息)
!(function () {
const userAgent = navigator.userAgent
// 验证是否为Android或iPhone
const android = userAgent.match(/(Android);?[\s/]+([\d.]+)?/)
const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
// 如果是Android或iPhone,则跳转至移动站点
if (android || iphone) {
location.href = ‘http://m.itcast.cn’ }
})()
本地存储只能存字符串
目标: 能够存储复杂数据类型以及取出数据
本地只能存储字符串,无法存储复杂数据类型.
解决:需要将复杂数据类型转换成JSON字符串,在存储到本地
语法:JSON.stringify(复杂数据类型)
将复杂数据转换成JSON字符串 存储 本地存储中
因为本地存储里面取出来的是字符串,不是对象,无法直接使用
解决:把取出来的字符串转换为对象
语法:JSON.parse(JSON字符串)
数组map方法 处理数组并返回一个新的数组
数组join方法 把数组转换为字符串
学生就业信息表案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>学生就业统计表</title>
<link rel="stylesheet" href="./iconfont/iconfont.css">
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<h1>学生就业统计表</h1>
<form class="info" autocomplete="off">
<input type="text" class="uname" name="uname" placeholder="姓名" />
<input type="text" class="age" name="age" placeholder="年龄" />
<input type="text" class="salary" name="salary" placeholder="薪资" />
<select name="gender" class="gender">
<option value="男">男</option>
<option value="女">女</option>
</select>
<select name="city" class="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
<option value="曹县">曹县</option>
</select>
<button class="add">
<i class="iconfont icon-tianjia"></i>添加
</button>
</form>
<div class="title">共有数据<span>0</span>条</div>
<table>
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>薪资</th>
<th>就业城市</th>
<th>录入时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- <tr>
<td>1</td>
<td>迪丽热巴</td>
<td>23</td>
<td>女</td>
<td>12000</td>
<td>北京</td>
<td>2099/9/9 08:08:08</td>
<td>
<a href="javascript:">
<i class="iconfont icon-shanchu"></i>
删除
</a>
</td>
</tr> -->
</tbody>
</table>
<script>
// 参考数据
const initData = [
{
stuId: 1,
uname: '迪丽热巴',
age: 22,
salary: '12000',
gender: '女',
city: '北京',
time: '2099/9/9 08:08:08'
}
]
// localStorage.setItem('data', JSON.stringify(initData))
// 1.渲染业务
// 先读取本地数据存储的数据 先转换为对象存储到变量里面,用于后期渲染数据
// 如果没有数据,用空数组来代替
const arr = JSON.parse(localStorage.getItem('data')) || []
const tbody = document.querySelector('tbody')
// 利用map和join渲染页面
function render() {
// map遍历数组,返回对应tr的数组
const trArr = arr.map(function (ele, index) {
return `
<tr>
<td>${ele.stuId}</td>
<td>${ele.uname}</td>
<td>${ele.age}</td>
<td>${ele.gender}</td>
<td>${ele.salary}</td>
<td>${ele.city}</td>
<td>${ele.time}</td>
<td>
<a href="javascript:" data-id="${index}">
<i class="iconfont icon-shanchu"></i>
删除
</a>
</td>
</tr>
`
})
console.log(trArr)
tbody.innerHTML = trArr.join('')
// 显示共计有几条数据
document.querySelector('.title span').innerHTML = arr.length
}
render()
// 2.新增业务
// form表单注册提交事件,阻止默认行为
const info = document.querySelector('.info')
const uname = document.querySelector('.uname')
const age = document.querySelector('.age')
const salary = document.querySelector('.salary')
const gender = document.querySelector('.gender')
const city = document.querySelector('.city')
info.addEventListener('submit', function (e) {
e.preventDefault()
// 非空判断
if (!uname.value || !age.value || !salary.value) {
return alert('输入内容不能为空')
}
// 给arr数组追加对象 里面存储表单获取过来的数据
arr.push({
// 处理 stuId 数组最后一条数据的stuId + 1
stuId: arr.length ? arr[arr.length - 1].stuId + 1 : 1,
uname: uname.value,
age: age.value,
salary: salary.value,
gender: gender.value,
city: city.value,
time: new Date().toLocaleString()
})
// 渲染页面和重置表单
render()
this.reset() //重置表单
// 把新的数组重新存放在本地数组中 要转化为JOSN字符串存储
localStorage.setItem('data', JSON.stringify(arr))
})
// 3.删除业务
// 事件委托的方式,给tbody注册点击事件
tbody.addEventListener('click', function (e) {
// 判断点击的是否是删除按钮
if (e.target.tagName === 'A') {
// console.log(e.target.dataset.id);
// 确认框确认是否真要删除
if (confirm('您确定要删除这条数据吗?')) {
// 根据索引号,利用splice删除这条数据
arr.splice(e.target.dataset.id, 1)
// 重新渲染页面
render()
// 把最新的arr数组存入本地数据
localStorage.setItem('data', JSON.stringify(arr))
}
}
})
</script>
</body>
</html>