Storage 使用

关于web项目数据存储

- 1. 存储种类
- 2. localStorage/sessionStorage
- - 2.1 概念
  - 2.2 api的使用
- 3. 学生curd测试localStorage

针对客户端存储讲 ——storage

1. 存储种类

1. 分为服务器端和客户端的存储
2. 服务器端：1. 内存存储(临时)application session request pageContext2. redis缓存，队列，16w次每秒，可持久化，可缓存3. 数据库持久化 mysql(23秒每次) mssqlserver oracle db2...
3. 客户端：1. cookie以文件的形式明文存储数据，不安全，最大存储单个数据4kb2. storage: 存储功能,相当于小型的数据库.(存储功能是在浏览器中)"永久保存": 只要不对浏览器进行清理,本地存储会永久保存数据.

2. localStorage/sessionStorage

2.1 概念

 使用HTML5可以在本地存储用户的浏览数据。早些时候，本地存储使用的是 cookie。但是Web存储需要更加的安全与快速。这些数据不会被保存在服务器，只用于用户请求网站数据情况。可以存储大量的数据，而不影响网站的性能。数据以 键/值 对存在，web网站的数据只允许该网页访问使用。只能存储String类型key:Stringvalue:Object1.本地存储器2.会话存储器(属于本地存储器)区别：localStorage 和 sessionStorage 生命周期不同localStorage永久有效sessionStorage跟会话有关实际开发中发现跟会话没有关系，当浏览器关闭之后，失效

2.2 api的使用

1、存储：localStorage.setItem(key,value)如果key存在时，更新value2、获取：localStorage.getItem(key)如果key不存在返回null3、删除：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);// 保存到storagelocalStorage.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 objectvar 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>