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>

…

Storage 使用相关推荐

PyTorch 笔记（11）— Tensor内部存储结构（头信息区 Tensor，存储区 Storage）
1. Tensor 内部存储结构 tensor 数据结构如下图所示,tensor 分为头信息区(Tensor)和存储区 (Storage),信息区主要保存着 Tensor 的形状(size).步长(s ...
《Bigtable:a distributed storage system for struct data》笔记
Bigtable 可以说是log-structed以及page-oriented 两种存储引擎的整合体,我们性能优越的单机存储引擎leveldb和rocksdb就是基于google的bigtable存 ...
Exception loading sessions from persistent storage
严重: Exception loading sessions from persistent storage java.io.EOFException 删除Tomcat里面的work/Catalina ...
Drill storage plugin实现原理分析
Drill Storage Plugin介绍 Drill是一个交互式SQL查询引擎,官方默认支持的数据源有hive.hbase.kafka.kudu.mongo.opentsdb.jdbc等,其中jd ...
Windows Azure Storage (25) Azure Append Blob
<Windows Azure Platform 系列文章目录> 在笔者之前的文章中,我们介绍了Azure Blob 有两种:Block Blob和Page Blob. 在这里笔者介绍Blo ...
LVM 类型的 Storage Pool - 每天5分钟玩转 OpenStack（8）
http://www.cnblogs.com/CloudMan6/p/5277927.html LVM 类型的 Storage Pool - 每天5分钟玩转 OpenStack(8) LVM 类型的 ...
unknown error mysql_解决MySQL执行SQL文件时报Error: Unknown storage engine 'InnoDB'的错误
我运行了一个innoDB类型的sql文件,报了Error: Unknown storage engine 'InnoDB'错误,网上查了很多方法,但是都没办法真正解决我的问题,后来解决了,在这里总结一 ...
微软正式发布Azure Storage上的静态网站
微软正式宣布了Azure Storage上的静态网站,提供了从托管在Azure Storage上的HTML.CSS和JavaScript文件提供内容的能力.静态网站包含内容固定的Web页面,同时仍然允 ...
H5中使用Web Storage来存储结构化数据
在上一篇对Web Storage的介绍中,可以看到,使用Storage保存key-value对时,key.value只能是字符串,这对于简单的数据来说已经够了,但是如果需要保存更复杂的数据,比如保存类 ...
SAP WM初阶Storage Type上的SUM Indicator参数修改
SAP WM初阶Storage Type上的SUM Indicator参数修改仓库号NM1下的存储类型005,设置如下: 它没有激活Storage Unit Management. 目前这个存储类型 ...

Storage 使用

关于web项目数据存储

1. 存储种类

2. localStorage/sessionStorage

2.1 概念

2.2 api的使用

3. 学生curd测试localStorage

Storage 使用相关推荐

最新文章

热门文章