针对客户端存储讲 ——storage
1. 存储种类
1. 分为服务器端和客户端的存储
2. 服务器端：
1. 内存存储(临时)application session request pageContext
2. redis缓存，队列，16w次每秒，可持久化，可缓存
3. 数据库持久化 mysql(23秒每次) mssqlserver oracle db2...
3. 客户端：
1. cookie以文件的形式明文存储数据，不安全，最大存储单个数据4kb
2. storage: 存储功能,相当于小型的数据库.(存储功能是在浏览器中)
"永久保存": 只要不对浏览器进行清理,本地存储会永久保存数据.
2. localStorage/sessionStorage
2.1 概念
使用HTML5可以在本地存储用户的浏览数据。
早些时候，本地存储使用的是 cookie。但是Web存储需要更加的安全与快速。
这些数据不会被保存在服务器，只用于用户请求网站数据情况。
可以存储大量的数据，而不影响网站的性能。
数据以 键/值 对存在，web网站的数据只允许该网页访问使用。
只能存储String类型
key:String
value:Object
1.本地存储器
2.会话存储器(属于本地存储器)
区别：
localStorage 和 sessionStorage 生命周期不同
localStorage永久有效
sessionStorage跟会话有关
实际开发中发现跟会话没有关系，当浏览器关闭之后，失效
2.2 api的使用
1、存储：localStorage.setItem(key,value)
如果key存在时，更新value
2、获取：localStorage.getItem(key)
如果key不存在返回null
3、删除：localStorage.removeItem(key)
一旦删除，key对应的数据将会全部删除
4、全部清除：localStorage.clear()
某些时候使用removeItem逐个删除太麻烦，可以使用clear,执行的后果是会清除所有localStorage对象保存的数据
5、遍历localStorage存储的key
.length 数据总量，例：localStorage.length
.key(index) 获取key，例：var key=localStorage.key(index);
6、存储JSON格式数据
JSON.stringify(data) 将一个对象转换成JSON格式的数据串,返回转换后的串
JSON.parse(data) 将数据解析成对象，返回解析后的对象
备注：localStorage存数的数据是不能跨浏览器共用的，一个浏览器只能读取各自浏览器的数据,储存空间5M。
3. 学生curd测试localStorage
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>学生利用localStorage curd</title>
<script type="text/javascript" src="../js/jquery-3.4.1.js" ></script>
<script>
function save_stu() {
if (window.Storage) {// 浏览器支持本地存储
// 学生集合字符串
var stuListStr = localStorage.getItem("stuList");
// 学生json集合对象
var stuList;
// 学生为空
if (!stuListStr) {
stuListStr = "[]";
}
// 转换json对象
stuList = JSON.parse(stuListStr);
// 取到学生
var name = $("#name").val();
var age = $("#age").val();
var gender = $("#gender").val();
var stu = {"name":name, "age":age, "gender":gender};
// 修改并 保存学生！！！
var index = $("#stuId").val();
if (index) {
// 修改
stuList[index] = stu;
$("#stuId").val("");
} else {
// 新增到集合
stuList.push(stu);
}
// 转换为字符串
stuList = JSON.stringify(stuList);
// 保存到storage
localStorage.setItem("stuList", stuList);
// 清空文本框
$("#name").val("");
$("#age").val("");
$("#gender").val("");
// 查询
query_stu();
}
}
function query_stu() {
// 清空表格
$("table tr:gt(0)").remove();
// console.log(!localStorage.hasOwnProperty("stuList"));
if (!localStorage.hasOwnProperty("stuList"))
return;
// 把Storage中的数据绑定到 表格
if (window.Storage) {
var stuListStr = localStorage.getItem("stuList");
var stuList = JSON.parse(stuListStr);
for (var i = 0; i < stuList.length; i++) {
var stu = stuList[i];
var tr = "<tr> <td>" + i + "</td> "
+ "<td>" + stu.name + "</td> "
+ "<td>" + stu.age + "</td>"
+ "<td>" + stu.gender + "</td> "
+ "<td>"
+ "<button οnclick='edit_stu(" + i + ")'>修改</button>"
+ "<button οnclick='del_stu(" + i + ")'>删除</button>"
+ "</td>"
+ " </tr>";
$("table:eq(0)").append(tr);
}
}
}
function edit_stu(index) {
// stu json object
var stu = JSON.parse(localStorage.getItem("stuList"))[index];
console.log(stu);
// 赋值
$("#name").val(stu.name);
$("#age").val(stu.age);
$("#gender").val(stu.gender);
// 赋值id 隐藏
$("#stuId").val(index);
}
function del_stu(index) {
var stuListStr = localStorage.getItem("stuList");
// console.log(stuListStr);
var stuList = JSON.parse(stuListStr);
// 从index开始删除一位
stuList.splice(index, 1);
// 删除本地储存..
localStorage.removeItem("stuList");
// 再保存..
localStorage.setItem("stuList", JSON.stringify(stuList));
query_stu();
}
</script>
</head>
<body>
<table>
<tr>
<td>id</td>
<td>name</td>
<td>age</td>
<td>gender</td>
<td>操作</td>
</tr>
</table>
<br />
<input type="hidden" id="stuId" />
<input type="text" id="name" />
<input type="text" id="age" />
<input type="text" id="gender" />
<br />
<input type="button" value="保存" onclick="save_stu()" />
<!--<input type="button" onclick="edit_stu()" />-->
<input type="button" value="查询" onclick="query_stu()" />
<input type="button" value="删除所有" onclick="localStorage.removeItem('stuList');" />
</body>
</html>
…
