• HTML5存储技术

    (转)

    浏览器支持

    所有最新的浏览器版本均支持Web存储特性，这些浏览器包括Firefox、Google Chrome、Safari、Opera和Microsoft® Windows® Internet Explorer® 8+。不幸地是，Internet Explorer 7和更早版本不支持Web存储。表 1显示了支持 HTML5 Web存储的每个桌面浏览器版本。

    表 1. HTML5 Web存储的桌面浏览器支持

    除了Opera Mini之外，其他移动浏览器也提供了对HTML5 Web存储的支持。表 2 显示了支持HTML5 Web存储的每个移动浏览器版本。

    表 2. HTML5 Web存储的移动浏览器支持

    HTML5 Web存储的浏览器支持十分令人瞩目。但是，较老的浏览器要求在使用之前检查Web存储支持的浏览器。为了了解Web存储支持而对浏览器进行检查非常简单。可以使用一个简单的条件语句来查看HTML5存储对象是否已经定义。如果已经定义，就可以放心进行Web存储脚本编写。如果未定义，而数据存储又是必需的，则需要采用一种备选方法，比如JavaScript cookie。清单 1的例子显示了一种简单的为Storage对象进行浏览器检查的方式。

    清单 1.Web存储支持的浏览器检查

    1. if(typeof(Storage)!== "undefined") {  
    2.   // Web storage is supported  
    3. }  
    4. else {  
    5.   // Web storage is NOT supported  
    6. } 

    如果浏览器不支持Web存储，那么您可以使用JavaScript cookie或一个现有的库（比如 AmplifyJS）来创建一个定制的Web存储对象。AmplifyJS是一组组件，旨在通过一个简单的API解决常见Web应用程序问题，包括某些浏览器中的Web存储支持。AmplifyJS用amplify.store包装程序来处理持久的客户端存储，它支持Internet Explorer 5+、Firefox 2+、Safari 4+、Chrome、Opera 10.5+、iOS 2+ 和 Android 2+。这个库还支持一个持久的API来处理跨浏览器存储；您无需基于具体的浏览器编写不同的代码。如果浏览器支持HTML5 Web存储，那么AmplifyJS就会使用最新的存储技术。如果浏览器不支持HTML5 Web存储，那么AmplifyJS就会降级，以支持没有该功能的存储。请参阅参考资料，更多地了解AmplifyJS以及用于其存储包装程序的API。

    入门

    有几种简单易用的方法可提供HTML5 Web存储功能。这些方法支持设置一个键/值对，提供了两个基于键来检索某个值的选项，同时清除所有的键/值对，并删除了某个特定的键/值对。表3显示了可用的HTML5 Web存储方法。

    表 3.HTML5 Web存储方法

    在创建并将键/值对添加到此Web存储对象时，可以使用任何类型作为键/值对中的值（字符串、数值、数组、对象等）。要存储一个数组或对象，则必须使用JSON对象通过JSON.stringify 方法将数据转换为一个字符串。在检索此数据时，可以使用JSON.parse 进行检索，它会返回原始状态的对象或数据。还有两种向Web存储对象添加键/值对的不同方式。第一种方式是使用setItem方法，如清单 2所示。

    清单 2.使用setItem方法向Web存储对象添加键/值对

    1. localStorage.setItem('myKey', 'myValue'); 

    向Web存储对象添加键/值对的第二种方法是使用带dot参数的Web存储对象来直接设置此键的值，如清单 3所示。

    清单 3.直接向Web存储对象添加键/值对

    1. localStorage.myKey = 'myValue'; 

    检索所存储的值同样十分简单，也有两种方式。第一种方式是使用getItem方法，它接受键作为参数并返回相应的值（如果存在）。清单 4显示了一个示例。

    清单 4.使用getItem从Web存储对象中检索键/值对

    1. localStorage.getItem('myKey'); 

    从Web存储对象中检索键/值对的第二个方法是使用dot参数直接访问它，如清单5所示。该示例返回了在之前的例子中设置的 'myValue'字符串值。

    清单 5.直接从Web存储对象中检索键/值对

    1. localStorage.myKey; 

    有两种方法可以删除所存储的数据。可以同时删除所有项，也可以一次删除个别项。要同时从Web存储对象中删除所有项，可以使用clear方法，如清单6所示。

    清单 6.从Web存储对象中删除所有键/值对

    1. localStorage.clear(); 

    要从Web存储对象中删除单个键/值对，需要使用removeItem方法。清单7显示了removeItem方法的一个示例，它接受一个键作为参数，并确定哪个键/值对要从此存储对象删除。

    清单 7.从Web存储对象中删除单个键/值对

    1. localStorage.removeItem('myKey'); 

    清单 8显示了一个如何使用JSON对象通过JSON.stringify方法将一个数组存储为字符串的示例。可以采用相同的方法处理对象。

    清单 8.在HTML5 Web存储中将一个数组存储为字符串

    1. var myArray = new Array('First Name', 'Last Name', 'Email Address');  
    2. localStorage.formData = JSON.stringify(myArray); 

    要从Web存储检索数组的字符串版本，并将它转换回一个可用的JavaScript数组，只需使用JSON.parse方法，如清单9所示。

    清单 9.从HTML5 Web存储中检索数组的字符串版本并将它转换成一个可用的JavaScript数组

    1. var myArray = JSON.parse(localStorage.formData); 

    Internet Explorer 8+、Opera 10.5+、Firefox 3.5+、Safari 4+ 和 Chrome 均包括了一个本地的JSON对象，可以使用该对象来支持之前例子中的那些代码。如果您使用的是版本较早的浏览器，那么可以下载json2.js 文件（请参阅 参考资料）。

    到目前为止，Web存储看起来很容易使用。但是，在开始使用之前，您应该意识到在共享的机器上会存在安全性问题。Web存储并不比cookies安全。所以不要在客户端存储敏感信息，比如密码或信用卡信息。

    工作中的Web存储

    介绍完基础知识后，现在是时候将HTML5 Web存储付诸于使用了。假设在您的网站上，您想要为一个Web表单提供离线支持。如果用户提交了表单，并且在网站恢复在线时让此表单与服务器同步，那岂不是很不错。HTML5可以实现此目标。

    创建一个简单的Web表单，其中包含姓名、电子邮件地址和提交按钮，如清单10所示。

    清单 10.使用HTML5 Web存储来存储数据的一个简单Web表单

    1. <html> 
    2. <head> 
    3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    4. <title>HTML5 Web Storage</title> 
    5. <style type="text/css"> 
    6. label,   
    7. input {  
    8.   display: block;  
    9. }  
    10. input {  
    11.   margin-bottom: 10px;  
    12. }  
    13. </style> 
    14. </head> 
    15.  
    16. <body> 
    17.  
    18. <form action="post.php" method="post" id="web-storage-form"> 
    19.   <label for="first-name">First name:</label> 
    20.   <input type="text" name="first-name" id="first-name"> 
    21.  
    22.   <label for="last-name">Last name:</label> 
    23.   <input type="text" name="last-name" id="last-name"> 
    24.  
    25.   <label for="email-address">Email Address:</label> 
    26.   <input type="text" name="email-address" id="email-address"> 
    27.  
    28.   <input type="submit" value="Submit"> 
    29. </form> 
    30.  
    31. </body> 
    32. </html> 

    此表单包含了一个ID，可使用JavaScript检索表单post和值。此外，它还提供了CSS，以创建具有表单元素的基本布局。标签和输入上的display:block 将每个元素置于一个新行。margin-bottom属性在条目之间创建空间，让页面看起来不会太乱。

    当用户提交表单时，代码首先会检索web-storage-form ID并使用jQuery捕获默认张贴，以阻止此张贴操作的发生。当张贴表单时，就可以收集表单值以及此表单动作的URL，以便将它们存储在变量中。在作为Asynchronous JavaScript + XML (Ajax) post发送表单值，或将它们存储于Web存储中时，您还需要序列化这些Web表单值。在提交表单之前，应该使用navigator.onLine属性查看用户当前是否在线。

    如果用户在线，则使用jQuery.post函数，这是一个简略的Ajax函数，用于发送数据并从服务器接收数据。这个函数接受四个参数：数据被发送到的url、正在发送的data（序列化后的表单值）、请求成功便会触发的callback函数以及dataType。在本例中，并未包括dataType，所以会使用默认参数。

    如果用户不在线，那么就可以让Web存储一展身手了。首先也是很重要的一点是，使用 清单1中创建的条件语句来查看浏览器是否支持Web存储。如果浏览器不支持 Web 存储，则使用一个定制键将表单值直接存储到localStorage 对象中。本例使用了formValues定制键。localStorage值的已经保存，现在可以检查当用户恢复在线时这些值是否存在，做法是通过添加一个if语句来检查localStorage.formValues是否有一个值。如果有一个值，则表明这个表单之前已经提交到 localStorage，并可以使用先前设置好的jQuery.post方法安全地向服务器发送数据。在提交值之后，应该从Web存储中将它们删除，以防止意外地重复提交它们。清单11显示了从使用Ajax的表单张贴到localStorage期间所需代码。

    清单 11. 离线时将表单数据存储于localStorage，在线时将其提交到服务器

    1. <script type="text/javascript"   
    2. src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> 
    3. </script> 
    4. <script type="text/javascript"> 
    5. $(document).ready(function() {  
    6.   // Check for web storage values from a previous offline session  
    7.   if(localStorage.formValues) {  
    8.     console.log("localStorage.formValues: "+ localStorage.formValues);  
    9.     postForm($("#web-storage-form").attr('action'), localStorage.formValues);  
    10.     localStorage.removeItem("formValues");  
    11.   }  
    12.  
    13.   $("#web-storage-form").submit(function(event) {  
    14.     // Prevent the form from posting  
    15.     event.preventDefault();   
    16.  
    17.     // Gather values  
    18.     var formValues = $(this).serialize();  
    19.     var url = $(this).attr('action');  
    20.     postForm(url, formValues);  
    21.   });  
    22.  });  
    23.  
    24. function postForm(url, formValues) {  
    25.   // Post to server or post to web storage  
    26.   if(navigator.onLine) {  
    27.     console.log("Online");  
    28.     $.post(url, formValues, function(data) {  
    29.       console.log("Success: "+ data);  
    30.     });  
    31.   }  
    32.   else {  
    33.     console.log("Offline");  
    34.     if(typeof(Storage) !== "undefined") {  
    35.       console.log("Storage supported");  
    36.       localStorage.formValues = formValues;  
    37.     }  
    38.   }  
    39. }  
    40. </script> 

    为了创建一个完整的例子，使用post.php 文件充当表单张贴的结尾，用以接收和响应表单请求。这个文件只简单接收表单张贴并通过打印键/值对进行响应，如清单12所示。当jQuery.post收到响应后，就可以将来自响应的数据写入控制台了。

    清单 12.可响应表单请求的PHP文件

    1. <?php print_r($_POST); ?> 

    当然，您还可以让这个例子更为健壮。比如，您可以在服务器端上提供数据库存储，并使用一个间隔来检查localStorage，以便随时监视用户的计算机是否恢复在线，从而提交表单数据。
  • 相关阅读:
    Linux下使用curl查看http请求各阶段耗时
    yum list查看版本
    【k8s】XX 修改ipvs模式
    域名访问时间 测试脚本
    关闭WINDOWS自动检测互联网络
    win10专业版安装VMware workstation pro 16时提示“setup failed to generate the ssl keys necessary to run vmware”笔记
    手动启动MegaRAID Storage Manager v17.05.02.01 for Linux
    Java基于POI实现excel任意多级联动下拉列表——支持从数据库查询出多级数据后直接生成【附源码】
    C# 后台POST数据及API接收简记
    Linux 安装pycharm，清除缓存，scp传输文件
  • 原文地址：https://www.cnblogs.com/huanlinll/p/2810832.html
Copyright © 2020-2023  润新知