html5的本地存储为,Web Storage
在HTML5出现之前，如果开发者需要在客户端存储少量数据，只能通过cookies来实现。然而，cookies有几个缺点：
每个域名下的cookie大小限制为4KB。
cookie将包含在每个http请求中，这将导致重复数据被发送。
cookie在网络传输过程中没有加密，存在安全隐患。
HTML5中增加了Web存储功能。Web存储的官方推荐是每个网站5MB，比cookies能存储更多的数据，比cookies功能更强大。现在火狐、Opera、Chrome和Safari都支持网络存储。Web Storage简介
Web存储分为会话存储和本地存储：
Session Storage：类似于会话。会话存储保存的数据的生存期与会话的生存期相同。当用户会话结束时，会话存储保存的数据会消失。
Local Storage：本地存储保存的数据始终是本地的，除非用户或程序明确知道，否则它会一直存在。
window对象中提供了sessionStorage和localStorage两个属性，分别表示会话存储和本地存储。这两个函数和用法几乎相同，只是它们存储数据的生存期不同。Storage提供了以下属性和方法(以localStorage为例):
localStorage.length:获取键值对的数量；
localStorage.key(index):获取索引的键；
localStorage.getItem(key):获取值；对应于指定的键；
Local storage.setItem (key，value):保存指定的键值对；
localStorage.removeItem(key):删除与指定键对应的键-值对；
localStorage.clear():删除所有键值对。
需要注意的是，key和值都必须是字符串，换句话说，web Storage的API只能对字符串进行操作。然后一些不是字符串的数据可以通过JSON转换成字符串格式，然后进行操作。
Web Storage用JSON存储多个数据
让我们通过一个小程序熟悉一下相关属性和方法的基本用法：
输入学生的基本信息(包括学号、姓名、年级、性别)，以学号为键值存储在本地存储；
通过学生编号查询学生的基本信息；
显示所有学生的信息；
首先，我们设计HTML页面。
XML/HTML代码将内容复制到剪贴板！doctype HTML HTML lang= en head meta charaset= UTF-8 Title HTML Web Storage/Title style type= text/CSS # content { border:1 px solid # 3d 19 DD；宽度：600px文本对齐：居中；填充：10px0边距：0自动；} # content input { margin-top:10px；}/style/headbydivid= content Label for= user _ num 学号：/Label input type= text id= user _ num name= user _ num /br/Label for= user _ name name:/Label input type= text id= user _ name /br/Label for= Grade Grade:/Label input type= text id= Grade name= Grade /br/Label for= sex Gender:/Label Type= text id= sex name= sex /br/input Type= button onclick= save() value= add list /HR/Label for= search _ num 输入学号：/Label Type= text id= search _ num name= search _ num /input Type= button onclick= find() value=查找学生信息/PID= find _ result br//p HR/Type= button onclick= Show() value=显示所有
通过JS，学生信息被保存在本地存储器中。通过分析，我们发现要保存的学生信息包括多个字段。这时，我们可以使用JSON的stringify()方法，将复杂的对象转换成字符串，存储在Web存储中。从Web存储中读取时，可以通过JSON的parse()方法将其转换为JSON对象：
Java Script语言代码复制内容到剪贴板函数save(){ varuser _ num=document。getelementbyid(用户编号).价值；varuser _ name element=document。getelementbyid(用户名).价值；vargradeElement=文档。getelementbyid( grade )。价值；varsexElement=document。getelementbyid( sex )。价值；varmsg={用户名：用户名元素，等级：等级元素，性别：性元素，};localStorage.setItem(user_num，JSON。stringify(msg))；} 我们往本地存储里存入三条学生信息，并查看本地存储中的存储信息：
用射流研究…实现通过学号查找学生信息时，需要注意取出的价值值为数据字符串，需要通过数据的解析()方法再转换成数据对象，代码如下：
Java Script语言代码复制内容到剪贴板function find(){ varuser _ num=document。getelementbyid( search _ num ).价值；varstr=本地存储。getitem(user _ num)；varmsg=JSON。parse(str)；var find _ result=document。getelementbyid( find _ result )；find_result.innerHTML=学号为：用户编号的基本信息：姓名：消息。用户名，年级：邮件等级，性别： msg.sex}同理，显示全部学生信息时，也一样需要将取出的价值字符串转换成数据对象：
Java Script语言代码复制内容到剪贴板函数show(){ varlist=document。getelementbyid( list )；如果(本地存储。length 0){ varresult= table border= 1 style= width:300 px；边距：0自动；;结果=trtd学号/tdtd姓名/tdtd年级/tdtd性别/TD/tr ；for(vari=0；ilocalstorage . length I){ varuser _ num=本地存储。关键(一)；varstr=本地存储。getitem(user _ num)；varmsg=JSON。parse(str)；result= trtd user _ num /tdtd msg用户名/tdtd 消息。等级/tdtd 消息。性别/TD/tr)；} result=/table ； list . innerhtml=result } else { list . innerhtml=当前还没有数据；} } 最后的效果图如下：
Web Storage存储图片
前面我们已经提到过，本地存储只支持字符串的存取，那么我们要做的就是将图片转换成上呼吸道感染数据。其中一种实现方式就是用帆布元素来加载图片。然后你可以以上呼吸道感染数据的形式从帆布中读取图片。
保存图片的函数如下：
Java Script语言代码复制内容到剪贴板functions itemg(key，src){ varimg=document。createelement(“img”)；//当图片加载完成的时候触发回调函数img.addEventListener(load ，function(){ varimg canvas=document。createelement( canvas )，img上下文=img画布。获取上下文(“2d”)；//确保帆布元素大小和图片的尺寸一致imgcanvas。宽度=这个。宽度；imgcanvas。身高=这个。身高；//渲染图片到帆布中imgContext.drawImage(this，0，0，this.width，this。身高)；//用数据全球资源定位器(Uniform Resource Locator)的形式取出img.crossOrigin= *//防止跨域取照片出错varimgAsDataURL=imgcanvas。toda taurl( image/png )；//保存到本地存储中try{ localStorage.setItem(key，imgAsDataURL)；} catch(e){ alert(保存失败！请重试。);} },假);img.src=src}该函数接收两个参数，一个是键值，还有一个是图片的路径，通过setImg("img1 "，" 1.jpg ")保存图片到本地存储，我们可以查看局部存储器的存储情况：
获取并显示的代码函数如下：
Java Script语言代码复制内容到剪贴板function getimg(key){ varsrcStr=本地存储。getitem(key)；varimgObj=文档。createelement(“img”)；imgObj.src=srcStrdocument。身体。appendchild(imgObj)；} 该函数只接收一个参数：需要查找图片的键值：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。