首页 > 作文

HTML5本地存储之Web Storage详解

更新时间:2023-04-03 04:49:19 阅读: 评论:0

在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又分为ssion storage和local storage:

ssion storage:与ssion类似,ssion storage保存的数据生存期限与ssion期限相同,用户ssion结束时,ssion storage保存的数据也就消失了。

local storage: local storage保存的数据一直在本地,除非用户或程序显式地清楚,否则这些数据会一致存在。

window对象中提供了ssionstorage和localstorage两个属性,这两个属性分别代表了ssion storage和lo成语中含有近义词cal storage。这个两个功能和用法几乎是相同的,只是它们保存数据的生存期限不同而已。storage提供了以下属性和方法(以localstorage为例):

•localstorage.length:获取key-value对的数目;
•localstorage.key(index):获取第index索引的key;
•localstorage.getitem(key):获取指定key对应的value;
•localstorage.titem(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
复制内容到剪贴板

<!doctypehtml><htmllang=“en”><head><metachart=“utf-8”><title>html本地存储之webstorage</title><styletype=“text/css”>#content{ border:1pxsolid#3d19dd; width:600px; text-align:center; padding:10px0; margin:0auto; } #contentinput{ margin-top:10px; } </style></head><body><divid=“content”><labelfor=“ur_num”>学号:</label> <inputtype=“text”id=“ur_num”name=“ur_num”/><br/><labelfor=“ur_name”>姓名:</label> <inputtype=“text”id=“ur_name”name=“ur_name”/> <br/> <labelfor=“grade”>年级:</label> <inputtype=“text”id=“grade”name=“grade”/> <br/> <labelfor=“x”>性别:</label> <inputtype=“text”id=“x”name=“x”/> <br/> <inputtype=“button”onclick=“save()”value=“添加名单”/> <hr/> <labelfor=“arch_num”>输入学号:</label> <inputtype=“text”id=“arch_num”name=“arch_num”/> <inputtype=“button”onclick=“find()”value=“查找学生信息”/> <pid=“find上班通知_result”><br/></p><hr/><inputtype=“button”onclick=“show()”value=“显示所有”> <divid=“list”> </div> <长沙高中排名;/div> <br/> </body></html>

通过js实现学生信息保存到local storage中,通过分析我们发现需要保存的学生信息包括多个字段,这时,我们可以利用json的stringify()方法,将复杂对象转变成字符串,存入web storage中;当从web storage中读取时,可以通过json的par()方法再转换成json对象:

javascript code
复制内容到剪贴板

functionsave(){ varur_num=document.getelementbyid(“ur_num”).value; varur_nameeleme青海教育考试院nt=document.getelementbyid(“ur_name”).value; vargradeelement=document.getelementbyid(“grade”).value; varxelement=document.getelementbyid(“x”).value; varmsg={ ur_name:ur_nameelement, grade:gradeelement, x:xelement, }; localstorage.titem(ur_num,json.stringify(msg)); }

我们往localstorage里存入三条学生信息,并查看localstorage中的存储信息:

用js实现通过学号查找学生信息时,需要注意取出的value值为json字符串,需要通过json的par()方法再转换成json对象,代码如下:

javascript code
复制内容到剪贴板

functionfind(){ varur_num=document.getelementbyid(“arch_num”).value; varstr=localstorage.getitem(ur_num); varmsg=json.par(str); varfind_result=document.getelementbyid(“find_result”); find_result.innerhtml=“学号为:”+ur_num+“的基本信息:姓名:”+msg.ur_name+“,年级:”+msg.grade+“,性别:”+msg.x; }

同理,显示全部学生信息时,也一样需要将取出的value字符串转换成json对象:

javascript code
复制内容到剪贴板

functionshow(){ varlist=document.getelementbyid(“list”); if(localstorage.length>0){ varresult=“<tableborder=’1′style=’width:300px;margin:0auto;’>”; result+=“<tr><td>学号</td><td>姓名</td><td>年级</td><td>性别</td></tr>”; for(vari=0;i<localstorage.length;i++){ varur_num=localstorage.key(i); varstr=localstorage.getitem(ur_num); varmsg=json.par(str); result+=“<tr><td>”+ur_num+“</td><td>”+msg.ur_name+“</td><td>”+msg.grade+“</td><td>”+msg.x+“</td></tr>”; } result+=“</table>”; list.innerhtml=result; }el{ list.innerhtml=“当前还没有数据”; } }

最后的效果图如下:

web storage存储图片

前面我们已经提到过,本地存储只支持字符串的存取,那么我们要做的就是将图片转换成 data uri 。其中一种实现方式就是用canvas元素来加载图片。然后你可以以data uri的形式从canvas中读取图片。
保存图片的函数如下:

javascript code
复制内容到剪贴板

functiontimg(key,src){ varimg=document.createelement(‘img’); //当图片加载完成的时候触发回调函数 img.addeventlistener(“load”,function(){ varimgcanvas=document.createelement(“canvas”), imgcontext=imgcanvas.getcontext(“2d”); //确保canvas元素大小和图片的尺寸一致 imgcanvas.width=this.width; imgcan有意思的对联vas.height=this.height; //渲染图片到canvas中 imgcontext.drawimage(this,0,0,this.width,this.height); //用dataurl的形式取出 img.crossorigin=“*”;//防止跨域取照片出错 varimgasdataurl=imgcanvas.todataurl(“image/png”); //保存到本地存储中 try{ localstorage.titem(key,imgasdataurl); } catch(e){ alert(“保存失败!请重试。。。”); } },fal); img.src=src; }

该函数接收两个参数,一个是key值,还有一个是图片的路径,通过timg(“img1”,”1.jpg”)保存图片到localstorage,我们可以查看local storage的存储情况:

获取并显示的代码函数如下:

javascript code
复制内容到剪贴板

functiongetimg(key){ varsrcstr=localstorage.getitem(key); varimgobj=document.createelement(‘img’); imgobj.src=srcstr; document.body.appendchild(imgobj); }

该函数只接收一个参数:需要查找图片的key值:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持www.887551.com。

本文发布于:2023-04-03 04:49:18,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/177c27e027c20178d7a4506e53621107.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:HTML5本地存储之Web Storage详解.doc

本文 PDF 下载地址:HTML5本地存储之Web Storage详解.pdf

标签:学号   字符串   数据   剪贴板
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图