在HTML5出现之前,如果开发者需要在客户端存储少量的数据,只能通过cookie来实现,但是cookie存在几个不足点:
•每个域名下cookie的大小限制在4KB。
•cookie会包含在每个http请求中,这样会导致发送重复的数据。
•cookie在网络传输过程中没有加密,存在安全隐患。
在HTML5新增了Web storage功能,Web Storage官方建议为每个网站是5MB,能存储比cookie更多的数据,并且具有比cookie更强大的功能。Web Storage现在已经得到了Firefox、Opera、Chrome、Safari各主流浏览器的支持。
Web Storage简介
Web Storage又分为Session Storage和Local Storage:
Session Storage:与session类似,Session Storage保存的数据生存期限与Session期限相同,用户Session结束时,Session Storage保存的数据也就消失了。
Local Storage: Local Storage保存的数据一直在本地,除非用户或程序显式地清楚,否则这些数据会一致存在。
window对象中提供了sessionStorage和localStorage两个属性,这两个属性分别代表了Session Storage和Local Storage。这个两个功能和用法几乎是相同的,只是它们保存数据的生存期限不同而已。storage提供了以下属性和方法(以localStorage为例):
•localStorage.length:获取key-value对的数目;
•localStorage.key(index):获取第index索引的key;
•localStorage.getItem(key):获取指定key对应的value;
•localStorage.setItem(key,value):保存指定的key-value对;
•localStorage.removeItem(key):删除指定key对应的key-value对;
•localStorage.clear():删除所有key-value对。
需要注意的是,key和value都必须为字符串,换言之,web Storage的API只能操作字符串。那么一些不是字符串的数据,我们可以通过JSON等方式将其转化成字符串格式后在操作。
Web Storage用JSON存储多个数据
我们通过一个小程序来熟悉一下相关属性和方法的基本用法:
•录入学生的基本信息(包括学号,姓名,年级,性别),以学号为key值来存储到local storage中;
•通过学号来查询学生的基本信息;
•显示全部学生的信息;
首先我们设计HTML页面
XML/HTML Code复制内容到剪贴板
- <!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>HTML本地存储之web storage</title>
-
<style type="text/css">
- #content{
- border: 1px solid #3D19DD;
- width:600px;
- text-align:center;
- padding: 10px 0;
- margin: 0 auto;
- }
- #content input{
- margin-top: 10px;
- }
-
</style>
-
</head>
-
<body>
-
<div id="content">
-
<label for="user_num">学号:</label>
-
<input type="text" id="user_num" name="user_num" />
-
<br/>
-
<label for="user_name">姓名:</label>
-
<input type="text" id="user_name" name="user_name" />
-
<br/>
-
<label for="grade">年级:</label>
-
<input type="text" id="grade" name="grade"/>
-
<br/>
-
<label for="sex">性别:</label>
-
<input type="text" id="sex" name="sex"/>
-
<br/>
-
<input type="button" onclick="save()" value="添加名单"/>
-
<hr/>
-
<label for="search_num">输入学号:</label>
-
<input type="text" id="search_num" name="search_num"/>
-
<input type="button" onclick="find()" value="查找学生信息"/>
-
<p id="find_result"><br/></p>
-
<hr/>
-
<input type="button" onclick="show()" value="显示所有">
-
<div id="list">
-
</div>
-
</div>
-
<br />
-
</body>
-
</html>
通过JS实现学生信息保存到local storage中,通过分析我们发现需要保存的学生信息包括多个字段,这时,我们可以利用JSON的stringify()方法,将复杂对象转变成字符串,存入Web Storage中;当从Web Storage中读取时,可以通过JSON的parse()方法再转换成JSON对象:
JavaScript Code复制内容到剪贴板
- function save(){
-
var user_num = document.getElementById("user_num").value;
-
var user_nameElement = document.getElementById("user_name").value;
-
var gradeElement = document.getElementById("grade").value;
-
var sexElement = document.getElementById("sex").value;
-
var msg = {
- user_name: user_nameElement,
- grade: gradeElement,
- sex: sexElement,
- };
- localStorage.setItem(user_num,JSON.stringify(msg));
- }
-
我们往localStorage里存入三条学生信息,并查看localStorage中的存储信息:
用JS实现通过学号查找学生信息时,需要注意取出的value值为JSON字符串,需要通过JSON的parse()方法再转换成JSON对象,代码如下:
JavaScript Code复制内容到剪贴板
- function find(){
-
var user_num = document.getElementById("search_num").value;
-
var str = localStorage.getItem(user_num);
-
var msg = JSON.parse(str);
-
var find_result = document.getElementById("find_result");
-
find_result.innerHTML = "学号为:"+user_num+"的基本信息: 姓名:"+msg.user_name + ",年级:" + msg.grade+",性别:"+msg.sex;
- }
-
同理,显示全部学生信息时,也一样需要将取出的value字符串转换成JSON对象:
JavaScript Code复制内容到剪贴板
- function show(){
-
var list = document.getElementById("list");
-
if(localStorage.length>0){
-
var result = "<table border='1' style='width:300px; margin:0 auto;'>";
-
result += "<tr><td>学号</td><td>姓名</td><td>年级</td><td>性别</td></tr>";
-
for(var i=0;i<localStorage.length;i++){
-
var user_num = localStorage.key(i);
-
var str = localStorage.getItem(user_num);
-
var msg = JSON.parse(str);
-
result += "<tr><td>"+user_num+"</td><td>"+msg.user_name+"</td><td>"+msg.grade+"</td><td>"+msg.sex+"</td></tr>";
- }
-
result += "</table>";
- list.innerHTML = result;
-
}else{
-
list.innerHTML = "当前还没有数据";
- }
- }
-
最后的效果图如下:
Web Storage存储图片
前面我们已经提到过,本地存储只支持字符串的存取,那么我们要做的就是将图片转换成 Data URI 。其中一种实现方式就是用canvas元素来加载图片。然后你可以以Data URI的形式从canvas中读取图片。
保存图片的函数如下:
JavaScript Code复制内容到剪贴板
- function setImg(key,src){
-
var img = document.createElement('img');
-
-
img.addEventListener("load",function(){
-
var imgCanvas = document.createElement("canvas"),
-
imgContext = imgCanvas.getContext("2d");
-
-
imgCanvas.width = this.width;
-
imgCanvas.height = this.height;
-
-
imgContext.drawImage(this,0,0,this.width,this.height);
-
-
-
img.crossOrigin = "*";
-
var imgAsDataURL = imgCanvas.toDataURL("image/png");
-
-
-
try{
- localStorage.setItem(key, imgAsDataURL);
- }
-
catch(e){
-
alert("保存失败!请重试。。。");
- }
-
-
}, false);
- img.src = src;
- }
-
该函数接收两个参数,一个是key值,还有一个是图片的路径,通过setImg(“img1”,”1.jpg”)保存图片到localStorage,我们可以查看Local Storage的存储情况:
获取并显示的代码函数如下:
JavaScript Code复制内容到剪贴板
- function getImg(key){
-
var srcStr = localStorage.getItem(key);
-
var imgObj = document.createElement('img');
- imgObj.src = srcStr;
- document.body.appendChild(imgObj);
- }
-
该函数只接收一个参数:需要查找图片的key值:
以上就是本文的全部内容
相关推荐
旅游资源网站的主要使用者分为管理员和用户,实现功能包括管理员:首页、个人中心、用户管理、景点信息管理、购票信息管理、酒店信息管理、客房类型管理、客房信息管理、客房预订管理、交流论坛、系统管理,用户:首页、个人中心、购票信息管理、客房预订管理、我的收藏管理,前台首页;首页、景点信息、酒店信息、客房信息、交流论坛、红色文化、个人中心、后台管理、客服等功能。 项目关键技术 开发工具:IDEA 、Eclipse 编程语言: Java 数据库: MySQL5.7+ 后端技术:ssm 前端技术:Vue 关键技术:springboot、SSM、vue、MYSQL、MAVEN 数据库工具:Navicat、SQLyog
1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用,注释清楚,适合新手
这里收集那些神奇的产品经理为我们带来的意想不到的产品功能和改版,又称_MDZZ_PM_awesome-pm
有戴头盔的人、未戴头盔的人、摩托车三种类别,包含736张图像、对应voc格式标签(xml)
微软演示材料
VB075期刊信息管理系统(SQL).7z
西门子SMART200程序 PID的控制写法,突破8路,PID直接做成子程序,无密码,直接调用。
1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 、5资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科学与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md或论文文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。 5、资源来自互联网采集,如有侵权,私聊博主删除。 6、可私信博主看论文后选择购买源代码。
基于YOLOv5的物体检测识别与分类系统,可根据不同的权重模型对不同的物体进行识别,整体分为图片、视频和摄像头三个检测模块,具体检测能力依据模型而定。
PMSM滑模控制仿真无位置 永磁电机 可提供文档if启动 如果没有收敛,将1e-4搞小一点 e-6或者e-5试下 本次滑模模型文档包括: 1 simulink界面调整,由于使用这个仿真的时候很可能会出现因为软件环境不同导致无法使用, 或者导致的波形错误,特写了一个关于参数界面的设置,按照那个设置,结合主框图,能够 避免使用出问题。 2 波形记录,将转速波形,转矩波形,位置估计+实际位置波形,三项定子电流波形, 给定转速(蓝绿色)+实际转速(红色)+估算转速(蓝色) 3 另外仿真程序内部,里面标注了各个功能模块的位置及部分原理。 4 lunwen的话推荐看 13 16 开头的lunwen,其他的可以拓展性的看。
构建使用jQuery组件DataTables.net的Asp.Net 8 MVC应用程序的实用指南。
内容概要:文章探讨了皮层微创脑机接口(BCI)传感器作为神经电信号采集与调控装置,在临床上的应用现状与科研进展,并分析了传感器在未来可能的发展趋势和技术革新点。介绍了现有商业化及实验级别的电极器材,并讨论了其如何进一步向着高通量、软界面与更持久的生命设计演化。 适合人群:神经工程专业科研工作者,尤其是关注BCI传感器领域的研究生、教师和其他相关专业的科研人士。 使用场景及目标:旨在增进从业者对于皮层微创BCI的理解,特别是传感器的设计、制作工艺和未来可能的方向;有助于科研与产品研发。 其他说明:文章还强调了技术创新在材料与设计理念层面的重要性,为BCI传感器在实际医疗与神经科研中发挥作用打下了坚实的基础。
基于python实现的社会力模型仿真+源码+文档,适合毕业设计、课程设计、项目开发。项目源码已经过严格测试,可以放心参考并在此基础上延申使用,详情见md文档~ 基于python实现的社会力模型仿真+源码+文档,适合毕业设计、课程设计、项目开发。项目源码已经过严格测试,可以放心参考并在此基础上延申使用,详情见md文档~ 基于python实现的社会力模型仿真+源码+文档,适合毕业设计、课程设计、项目开发。项目源码已经过严格测试,可以放心参考并在此基础上延申使用,详情见md文档~ 基于python实现的社会力模型仿真+源码+文档,适合毕业设计、课程设计、项目开发。项目源码已经过严格测试,可以放心参考并在此基础上延申使用,详情见md文档~ 基于python实现的社会力模型仿真+源码+文档,适合毕业设计、课程设计、项目开发。项目源码已经过严格测试,可以放心参考并在此基础上延申使用,详情见md文档~ 基于python实现的社会力模型仿真+源码+文档,适合毕业设计、课程设计、项目开发。项目源码已经过严格测试,可以放心参考并在此基础上延申使用,详情见md文档~
2024.9.18 作业
Python环境一键安装脚本,适用于Linux_lxspacepy
昕一 - 一样的月光 [qmms2].mp3
1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用,注释清楚,适合新手
http服务器的实现.7z
高校奖学金管理系统的主要实现功能包括:管理员:首页、个人中心、学生管理、辅导员管理、教务处管理、奖学金类型管理、奖学金信息管理、学生成绩管理、奖惩信息管理、奖学金申请管理、公告信息管理。学生:首页、个人中心、奖学金信息管理、学生成绩管理、奖惩信息管理、奖学金申请管理、公告信息管理,辅导员;首页、个人中心、学生管理、学生成绩管理、奖惩信息管理、奖学金申请管理、公告信息管理,教务处;首页、个人中心、学生管理、学生成绩管理、奖惩信息管理、奖学金申请管理、公告信息管理 项目关键技术 开发工具:IDEA 、Eclipse 编程语言: Java 数据库: MySQL5.7+ 后端技术:ssm 前端技术:Vue 关键技术:springboot、SSM、vue、MYSQL、MAVEN 数据库工具:Navicat、SQLyog
Palo Alto Networks PA-220 管理员指导手册