1.什么是web存储技术?
随着Web应用的发展,数据存储不在单一的存储在后台的数据库中(mongoDB,mysql,oracle)。客户端(浏览器)存储的用途也越来越来,最经典的就是“记住用户名”,实现客户端存储的方式有很多种,比如cookie(通用),flash(插件),userData(ie),globalStroage(firefox)。
2.有哪些web存储技术?
1.Cookie http无状态 - 服务器不知道是谁发的通信- 不知道是不是上一个人,Cookie实际上是一小段的文本信息(key-value格式)。客户端向服务器发起请求,如果服务器需要记录该用户状态,
就使用response向客户端浏览器颁发一个Cookie。客户端浏览器会把Cookie保存起来。当浏览器再请求该网站时,
浏览器把请求的网址连同该Cookie一同提交给服务器。服务器检查该Cookie,以此来辨认用户状态。
存在形式:字符串类型-'key=value;key=value;...'
容量:4kb
每次浏览器发送请求会带上cookie信息 - 不安全
2.sessionStorage 会话级存储
生命周期:页面打开到页面关闭 - 是一个临时存储的地方
注意:存储的数据一定是一个字符串,因此存储时常用JSON.stringify(obj)在进行存储
使用: 存储 sessionStorage .setItem("数据的变量名",存储的数据)
获取 sessionStorage .getItem("数据的变量名")
删除 sessionStorage .removeItem("数据的变量名")
清楚所有 sessionStorage .clear()
3 localStorage 本地存储
生命周期: 永久存储,除非进行手动删除
使用: 存储 localStorage .setItem("数据的变量名",存储的数据)
获取 localStorage .getItem("数据的变量名")
删除 localStorage .removeItem("数据的变量名")
清楚所有 localStorage .clear()
3.存储技术的实例 - 任务清单
<!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>Document</title>
<style>
#wrap {
width: 420px;
height: 550px;
background: pink;
margin: 50px auto;
}
h2 {
height: 55px;
line-height: 55px;
text-align: center;
}
#title {
height: 45px;
background: gray;
}
.showList,
.addTask {
display: inline-block;
width: 49%;
text-align: center;
height: 45px;
line-height: 45px;
}
span:hover {
cursor: pointer;
}
.active {
color: white;
}
.taskList {
display: none;
width: 100%;
height: 400px;
/* background: salmon; */
}
.add {
padding-left: 15px;
padding-top: 25px;
width: 100%;
height: 300px;
/* background: fuchsia; */
}
ul,
li {
list-style: none;
}
ul {
padding: 0;
margin: 0;
width: 100%;
height: 400px;
/* background: salmon; */
}
.time,
.task {
display: inline-block;
width: 35%;
height: 40px;
line-height: 40px;
text-align: center;
/* background: cadetblue; */
}
.delete {
cursor: pointer;
width: 45px;
height: 25px;
margin-left: 50px;
}
.Nowtask {
height: 23px;
}
.date {
width: 157px;
height: 23px;
}
.toAdd {
margin-left: 88px;
width: 76px;
height: 27px;
}
</style>
</head>
<body>
<div id="wrap">
<h2>希望清单</h2>
<div id="title">
<span class="showList" data-title="taskList">任务列表</span>
<span class="addTask active" data-title="add">添加任务</span>
</div>
<div id='show'>
<!-- 任务列表 -->
<div class="taskList">
<ul>
</ul>
</div>
<!-- 添加任务 -->
<div class="add">
任务:<input type="text" name="" id="" class="Nowtask"><br><br>
日期:<input type="date" name="" id="" class="date"><br><br>
<button class="toAdd">添加</button>
</div>
</div>
</div>
<script src="./jquery.min.js"></script>
<script>
//加载列表项
showTask();
//点击切换 - 切换对应界面和当前字体颜色
$('#title>span').click(function () {
$(this).addClass('active').siblings().removeClass('active');
let value = $(this).data('title');
$('#show>div').hide();
$(`.${value}`).show();
})
//提交进行存储
$('.toAdd').click(function () {
//获取值
let task = $('.Nowtask').val();
let date = $('.date').val();
let obj = {
task: task,
date: date
}
//获取存储的数据并转为数组
let taskList = JSON.parse(localStorage.getItem('taskList')) || [];
taskList.push(obj);
//重新进行保存数据
localStorage.setItem('taskList', JSON.stringify(taskList));
//将数据显示在列表项
$('.taskList').show().siblings().hide();
$('.showList').addClass('active').siblings().removeClass('active')
//获取保存数据进行显示
showTask();
});
//渲染数据
function showTask() {
let allTask = JSON.parse(localStorage.getItem('taskList')) || [];
//遍历添加数据
let html = '';
allTask.forEach(function (v, i) {
html += ` <li>
<span class="time">${v.date}</span>
<span class="task">${v.task}</span>
<button class="delete" data-index ='${i}'>删除</button>
</li>`
});
$('ul').html('');
//将数据进行渲染界面
$('ul').append(html);
}
//利用委托事件制作删除
$('ul').on('click','.delete',function(){
let allTask = JSON.parse(localStorage.getItem('taskList')) || [];
let index = $(this).data('index');
console.log(index)
allTask.splice(index,1);
localStorage.setItem('taskList', JSON.stringify(allTask));
showTask();
})
</script>
</body>
</html>