html5
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧

HTML5本地存储之Web Storage详解

发布时间：2022-04-13 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了HTML5本地存储之Web Storage详解，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

在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复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>HTML本地存储之web storage</title>  
  6.     <style type="text/css">  
  7.         #content{   
  8.             border: 1px solid #3D19DD;   
  9.             width:600px;   
  10.             text-align:center;   
  11.             padding: 10px 0;   
  12.             ;margin: 0 auto;   
  13.         }   
  14.         #content input{   
  15.             margin-top: 10px;   
  16.         }   
  17.     </style>  
  18. </head>  
  19. <body>  
  20.     <div id="content">  
  21.          <label for="user_num">学号：</label>     
  22.         <input type="text" id="user_num" name="user_num" />  
  23.         <br/>  
  24.         <label for="user_name">姓名：</label>     
  25.         <input type="text" id="user_name" name="user_name" />     
  26.         <br/>     
  27.         <label for="grade">年级：</label>     
  28.         <input type="text" id="grade" name="grade"/>     
  29.         <br/>     
  30.         <label for="sex">性别：</label>     
  31.         <input type="text" id="sex" name="sex"/>     
  32.         <br/>    
  33.         <input type="button" onclick="save()" value="添加名单"/>     
  34.         <hr/>     
  35.         <label for="seArch_num">输入学号：</label>     
  36.         <input type="text" id="search_num" name="search_num"/>     
  37.         <input type="button" onclick="find()" value="查找学生信息"/>     
  38.         <p id="find_result"><br/></p>  
  39.         <hr/>  
  40.          <input type="button" onclick="show()" value="显示所有">    
  41.          <div id="list">     
  42.          </div>    
  43.     </div>     
  44.     <br />             
  45. </body>  
  46. </html>  

通过JS实现学生信息保存到local storage中，通过分析我们发现需要保存的学生信息包括多个字段，这时，我们可以利用JSON的stringify()方法，将复杂对象转变成字符串，存入Web Storage中；当从Web Storage中读取时，可以通过JSON的parse()方法再转换成JSON对象：

JavaScript Code复制内容到剪贴板
  1. function save(){     
  2.         VAR user_num = document.getElementById("user_num").value;   
  3.         var user_nameElement = document.getElementById("user_name").value;   
  4.         var gradeElement = document.getElementById("grade").value;     
  5.         var sexElement = document.getElementById("sex").value;   
  6.         var msg = {   
  7.             user_name: user_nameElement,   
  8.             grade: gradeElement,   
  9.             sex: sexElement,   
  10.         };    
  11.         localStorage.setItem(user_num,JSON.stringify(msg));     
  12.     }   
  13.   

我们往localStorage里存入三条学生信息，并查看localStorage中的存储信息：

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

JavaScript Code复制内容到剪贴板
  1. function find(){     
  2.         var user_num = document.getElementById("search_num").value;    
  3.         var str = localStorage.getItem(user_num);    
  4.         var msg = JSON.parse(str);    
  5.         var find_result = document.getElementById("find_result");     
  6.         find_result.innerHTML = "学号为："+user_num+"的基本信息： 姓名："+msg.user_name + "，年级：" + msg.grade+",性别："+msg.sex;     
  7.     }    
  8.   

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

JavaScript Code复制内容到剪贴板
  1. function show(){     
  2.         var list = document.getElementById("list");     
  3.         if(localStorage.length>0){     
  4.             var result = "<table border='1' style='width:300px; margin:0 auto;'>";     
  5.             result += "<tr><td>学号</td><td>姓名</td><td>年级</td><td>性别</td></tr>";     
  6.             for(var i=0;i<localStorage.length;i++){     
  7.                 var user_num = localStorage.key(i);     
  8.                 var str = localStorage.getItem(user_num);     
  9.                 var msg = JSON.parse(str);     
  10.                 result += "<tr><td>"+user_num+"</td><td>"+msg.user_name+"</td><td>"+msg.grade+"</td><td>"+msg.sex+"</td></tr>";     
  11.             }     
  12.             result += "</table>";     
  13.             list.innerHTML = result;     
  14.           }else{     
  15.                 list.innerHTML = "当前还没有数据";     
  16.           }     
  17.     }      
  18.   

 最后的效果图如下：

Web Storage存储图片

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

JavaScript Code@H_320_1264@复制内容到剪贴板
  1. function setimg(key,src){   
  2.         var img = document.createElement('img');   
  3.         //当图片加载完成的时候触发回调函数   
  4.         img.addEventListener("load",function(){   
  5.             var imgCanvas = document.createElement("canvas"),   
  6.             imgContext = imgCanvas.getContext("2d");   
  7.         //确保canvas元素大小和图片的尺寸一致   
  8.         imgCanvas.width = this.width;   
  9.         imgCanvas.height = this.height;   
  10.         //渲染图片到canvas中   
  11.         imgContext.drawImage(this,0,0,this.width,this.height);   
  12.   
  13.         //用data url的形式取出   
  14.         img.crossOrigin = "*"; //防止跨域取照片出错   
  15.         var imgAsDataURL = imgCanvas.toDataURL("image/png");   
  16.   
  17.         //保存到本地存储中   
  18.         try{   
  19.             localStorage.setItem(key, imgAsDataURL);   
  20.         }   
  21.         catch(e){   
  22.             alert("保存失败！请重试。。。");   
  23.         }   
  24.   
  25.         }, false);   
  26.         img.src = src;   
  27.     }   
  28.   

该函数接收两个参数，一个是key值，还有一个是图片的路径，通过setImg(“img1”,”1.jpg”)保存图片到localStorage，我们可以查看Local Storage的存储情况：

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

JavaScript Code复制内容到剪贴板
  1. function getImg(key){   
  2.         var srcStr = localStorage.getItem(key);   
  3.         var imgObj = document.createElement('img');   
  4.         imgObj.src = srcStr;   
  5.         document.body.appendChild(imgObj);   
  6.     }   
  7.   

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本宝典。

脚本宝典总结

以上是脚本宝典为你收集整理的HTML5本地存储之Web Storage详解全部内容，希望文章能够帮你解决HTML5本地存储之Web Storage详解所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：Web本地存储本地存储
猜你在找的html5相关文章
其他相关热搜词更多
phpjavapython程序员loadpost-format-gallerydivString参数开发ListcapMapClass工具安装SQL数据库资源this
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新html5教程
热门html5教程