不可不知的10个HTML5工具
我的图书馆
不可不知的10个HTML5工具
毋庸置疑，HTML5已成为Web开发中最炙手可热的技术。本文跟大家分享的这10款HTML5工具，有模板创建、开发框架、代码编辑、图像绘制、浏览器测试等功能，希望能帮助提升你的开发效率。
这是一个HTML5模板创建工具，帮助你得到持续的最新的HTML5样板文件。
XRAY目前支持Safari, Firefox和IE浏览器，XRAY使用了CSS3的多个酷炫功能，如圆角边框、不透明度、盒子、文本阴影和HTML5 canvas。
功能强大的HTML5,CSS和JavaScript开发框架，只需通过一个SDK就可以交付到所有常用平台，可创建跨多平台和多设备应用程序。
在线编辑HTML和CSS代码并实时生成样式，还可以帮助学习HAML,Sass和CoffeeScript。
这个开源在线工具用于为你的HTML开发创建脚本预加载 (spinners or throbblers)。
基于jQuery HTML5的UI框架，开发面向桌面、移动设备的应用程序，主要有， 和
三个版本。
Spritebox是一个由jQuery, CSS3 和 HTML5开发的所见即所得的绘图工具，将图形绘制出来之后可以马上生成CSS，非常方便。
这个工具给出了一种检测浏览器自定义字体的新方法，不用编码，不用上传，只需要拖放进去就可以了！
这是一个类似于儿童绘制动画的画板，你还可以看到各种精彩草图的绘制过程。
用于测试你的浏览器对HTML5支持的友好度，并给出测试分数。
TA的最新馆藏[转]&9款HTML5实现的超酷特效_HTML5教程_前端技术
您的位置： &
& 详细内容
HTML5是HTML的升级版，HTML5有两大特点：首先，强化了 Web 网页的表现性能。其次，追加了本地数据库等 Web
应用的功能。广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。今天我们推荐9款使用HTML5生成的特 殊效果，希望可以对大家的使用带来帮助！
& HTML5 3D 翻转展示幻灯-Banner
背景以纯白为主，3D全方位的旋转效果令人震撼，运用起来绝对是你页面的一大亮点！
一个不需要摄像装备在家也能实现的全景演示效果
此3D效果页面暂时需要基于WEBKIT并支持CSS 3D的浏览器来浏览。您可以使用最新的Safari或Chrome浏览器，或者iOS操作系统的设备(iPhone,iPad,iPod Touch)上的浏览器。
超级棒的3D全景效果，你只需要环绕一周，分别拍摄6张图，依次是B F R L U D六张图，它会借助JS生产一个六面的盒子，从而达到全景效果，如果你使用的是谷歌浏览器或者支持css 3D的浏览器，一定要点开看看这款特效！因为它实在是太棒了！！
Javascript--数学之美--敬佩
大师给力之作-javascript讲述数学之美，所以说数学好才是真的好！
canvas画的时钟
一款时钟效果，效果非常棒！
HTML5画板实现的画图板效果
如果你需要整合一个现成的HTML5画板的话， 这个drawingboard.js绝对是个不错的选择，支持颜色选择，undo，清除，画笔等等功能，相信你会喜欢的。
CanvasLoader Creator - 免费的在线工具，生成加载动画
CanvasLoader是一款免费的在线工具，可以帮助你生成加载动画的脚本，它生成的是自旋转的圆圈加载动画，脚本可以用在你的HTML5项目
中。它 可以进行一定的客制化，来生成你想要的加载动画，其中包括圆圈的半径，旋转速度，密度，颜色等属性。
你可以下载代码片段，也可以直接下载生成的html文件，应用在你的程序中。
动画SVG实现的超酷动态选择框效果
一个CSS实现的动态多选框效果，相信如果能应用到项目中去，肯定非常的亮眼！
html5+css3实现的焦点图特效
很有意思的一款特效，全方位旋转，还不赶紧收集回去，自己捉摸捉摸，也许你也会设计的更好！
html5+css3实现的焦点图特效
非常有趣的折叠效果！
本周推荐的9款HTML5实现的超酷特效，希望对大家有所帮助！
( 11:40:29)
相关排行总榜HTML5的在本质上Web存储_其他_其他_或代码
| 文章 >> 其他 >> 其他
HTML5的在本质上Web存储
背景 Web存储（也称为DOM存储）带来了两个品牌的新对象:sessionStorage和localStorage。 {A}"。它们是:第一是专为用户进行单一交易的场景，但可以在不同的窗口，同时进行多个交易。第二个存储机制是专为储存跨越多个窗口，并持续超越本届会议。特别是，Web应用程序可能希望存储用户数据，如用户创作的整个文件或用户的邮箱，客户端性能方面的原因，兆字节。 sessionStorage和localStorage是在HTML5 W3的介绍，以解决上述问题，让我们开始检讨如何曲奇目前工程。当前的HTTP状态存储？？机制一个HTTP cookie是一套键/值对其中一个的HTTP的Web服务器请求一个具体的客户端浏览器（即用户代理 - UA）来存储客户端的硬盘上，时的UA的请求的网站服务器进一步，UA将只要下列条件都满意的包装内的所有HTTP请求报头的cookie数据:没有过期的cookie数据。cookie是存储时，被请求域是完全相同的域下。域下的请求路径是同一个存储的cookie。一旦cookie过期，浏览器会从本地硬盘中删除它。常见的cookie的例子:
最终用户类型在浏览器的导航栏点击进入。 返回HTTP状态200消息（绿色部分，预计Web服务器客户端浏览器来存储两个cookie的键/值对:WayneKey1 =值; WayneKey2 =值2，他们可以从整个域的访问，并他们将于1年后）:HTTP/1.1 200 OK
Content-type: text/html
&span style="COLOR: green">Set-Cookie: WayneKey1=value1;WayneKey2=Value2;domain=www.foo.
expires=Tue, 24-Feb-:22 GMT; path=/; HttpOnly&/span>
(Response HTTP body)浏览器接收HTTP响应和纯文本到用户的硬盘中cookie的键/值存储。用户做了一些交互，并要求回，浏览器将换到请求的HTTP头的cookie数据。{C}注:在上面的＃4，如果客户端浏览器不支持Cookie或Cookie是由用户禁用，回退机制可能通过HTTP Web服务器实现，这通常可以存储在URL中的Cookie数据（实例例如ASP.NET可以支持URL中存储的cookie设置Cookie的="; UseU在web.config中，请参阅:），或者，Web服务器将不会允许客户端使用的特点。基于一个服务器分配的会话ID存储在客户端的cookie，Session对象是广泛使用在所有流行的Web服务器，存储在服务器端的临时数据（可能是内存，数据库或专用会议存储服务器等），禁用cookie的情况下客户端，Web服务器可能采取上述同样的策略（URL中存储的cookie），或相反，他们不容许客户使用的特点，除了客户端获取的cookie启用。情况如今无数的网站（例如谷歌，Facebook，亚马逊，"纽约时报"）依赖于HTTP cookie来存储数据，如用户的偏好，登录信息，购物车等。如果您在您的浏览器禁用Cookie，并尝试访问很多非常流行的Web应用程序（如在Facebook，Twitter，Gmail中，亚马逊等）今天，你可能会看到下面的截图: {S0}
{S2}在一个字，Cookie的启用是一项强制性的条件，使用这些网络巨头。Cookie的缺点我调查，并总结出了下面列出（包括两个W3C的开头提到的几点）的Cookie的缺点:尺寸和计数限制大多数浏览器有限的cookie大小为4096字节和300内最大的cookie数域。 IETF建议的限制标准，是指: 6.3节。性能命中如果一个网站使用cookie，那么每一个HTTP请求/服务器/浏览器之间的响应必须包括在HTTP头中的所有Cookie键/值对。安全 Cookie是存储在用户的本地硬盘感叹文本。如果开发商没有妥善处理，可能发生。存储能力为多个相同的Web应用程序的Cookie的实例的数据分别是不容易处理一个使用案例:相同的Web应用程序运行在不同的窗口，不互相干扰的情况下单独的实例（sessionStorage是嘛支持，我会在这个岗位描述后）。Web存储机制的cookie，服务器/客户端之间传递，他们都可以通过访问不同，sessionStorage / localStorage 100％，在客户端存储一个具体的浏览器，sessionStorage暂时储存在一个HTTP会话数据，localStorage存储到客户端数据永久硬盘。它的优点是显而易见的:
数据不会通过通过HTTP请求/响应，带宽将被保存。
不会有4KB的限制，网站具有更大的灵活性，以大型数据存储在客户端。注:W3C的"建议5兆字节每domainquot localStorage大小的限制，并"欢迎，这是远远大于4KB的Cookie限制。现在，不会通过网络传递数据，这将是相对更安全。进一步考虑按＃3，一些现有的HTTPS连接在理论上可以使用普通的HTTP通过Web存储，是因为没有需要对数据进行加密，数据存储在客户端。由于HTTPS通常只有10％的性能，与HTTP相比，最终无论是性能将得到改善或保存成本（采购更便宜的服务器硬件）。在我的愚见，Web存储是在HTML5的最大特点，我相信在不久的将来它会导致一个HTTP Web状态存储革命！为什么呢？考虑下面列出的几个故事，我想他们很可能会很快发生！带宽节省。你有一种流行的电子邮件服务的Web应用程序的电子邮件帐户，并使用它在一个具体的浏览器访问您的第一时间，每天。它存储到您的浏览器的本地存储300个联系人名单以及最新的20个电子邮件线程（第一页），和数据需要在全长约8千字节。在今后的访问，这8千字节不会被转移到电子邮件服务器。没有下载时间=更好的UX操作系统。从你喜欢上一种流行的视频网站，它记录的视频列表（默认情况下，10最新观看视频），你看过，以及索引的实时视频流数据看录像。每次访问的网站，你的能力，以查看您的观看历史和最重要的，你可以重新在第二个列表观看任何视频？？从您的本地存储。冲浪相同的网站，同时使用多个帐户。出于某种原因，你注册了一个网站，它使用会话存储的两个帐户，并在两个浏览器标签和隔离的互动，你可以用这两个帐号登录。例如，检查在两个标签同时使用两个Gmail帐户的Gmail。在JavaScript中操作存储存储接口两个sessionStorage / localStorage从一个接口存储继承，它定义在Web存储规格:interface Storage {
readonly attribute unsigned long
DOMString key(in unsigned long index);
getter any getItem(in DOMString key);
setter creator void setItem(in DOMString key, in any value);
deleter void removeItem(in DOMString key);
void clear();
};基本操作首先，我们需要检查一个具体的浏览器是否支持每个 Web存储与否，IE8（IE8不支持存储事件，而IE9的RC支持），火狐3.5浏览器Safari 4.0浏览器4.0所有支持Web存储。我们可以写一个简单的JS函数，检查客户端浏览器是否支持Web存储或不:function supportsLocalStorage() {
return ('localStorage' in window) && window['localStorage'] !== null;
if(supportsLocalStorage()) {
alert('Sorry, your browser does not support Web Storage');
}如果浏览器不支持，然后调用sessionStorage和localStorage在JavaScript中是相当容易的。示例代码演示的set / get /删除/存储显示如下项目:localStorage.{key} = strV
var localVal = localStorage.{key};
sessionStorage.{key} = strV
var sessionVal = sessionStorage.{key};
localStorage.removeItem('key')
sessionStorage.removeItem('key')
localStorage.clear();
sessionStorage.clear();请知道的一件事:sessionStorage和localStorage只能存储DOM字符串值，如果我们想保存到他们的JavaScript对象，答案是肯定的JSON字符串，和延长Storage.setObject / GETOBJECT通过使用JavaScript的原型的方法，代码所示:Storage.prototype.setObject = function (key, value) {
this.setItem(key, JSON.stringify(value));
Storage.prototype.getObject = function (key) {
return this.getItem(key) && JSON.parse(this.getItem(key));
localStorage.setObject('key',objValue);
localStorage.getObject('key',objValue);
sessionStorage.setObject('key', objValue);
sessionStorage.getObject('key', objValue);我附加WebStorageDemo显示如何存储到DOM String和JSON字符串sessionStorage / localStorage，代码片段，并显示下面的截图:储存到sessionStorage一些假冒购物车项目:function S4() {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
function Guid() {
return (S4() + S4() + "-" + S4() + "-" + S4() +
"-" + S4() + "-" + S4() + S4() + S4());
function ShoppingCartItem() {
this.ProductID = Guid();
this.ProductName = '';
this.CategoryID = -1;
this.Price = -1.0;
var item1 = new ShoppingCartItem();
item1.ProductName = 'HP WebOS Topaz';
item1.CategoryID = 8;
item1.Price = 849.99;
var item2 = new ShoppingCartItem();
item2.ProductName = 'Apple Ipad II';
item2.CategoryID = 10;
item2.Price = 799.99;
var currentUserShoppingCart = new Array();
currentUserShoppingCart[0] = item1;
currentUserShoppingCart[1] = item2;
sessionStorage.setObject('UserShoppingCart', currentUserShoppingCart); {S3}钻研深入sessionStorage / localStorage机制正如我所提到的在一开始，无论是sessionStorage / localStorage"100％存储在客户端通过一个具体，它们之间的区别是，sessionStorage是孤立的，而窗口/标签localStorage是跨页下一个域共享换句话说，sessionStorage需要照顾，将临时数据存储在一个HTTP会话的生命之一的浏览器窗口/标签，每个窗口/选项卡可以保持其自己的会话数据发生时间;虽然数据localStorage店到用户的硬盘磁盘，所有下页依然存在这个具体领域可以操纵localStorage。再次让我们看到一个演示，我添加了一个存储到sessionStorage自然数的计数器，和一个可点击的按钮可以增加计数器，下面的代码:&input type="button" value="Counter++"
枚nclick="sessionStorage.Counter++;" /&和我打开页面的两个实例，分别在每一页上单击计数器，然后我们将看到他们每个人保持自己的计数器: 的相反，在localStorage中存储的数据可以在同一域中的所有网页访问，如下所示的演示，最初我插入一个假USERPROFILE localStorage，然后打开另一个网页，其中有不同的路径，但在同一域，我们将看到的第一页存储USERPROFILE可以检索。 {五}注释:localStorage既然是共享的，因此它可能是由多个页面操纵同时，W3强调，浏览器应该实现存储互斥，以确保线程安全localStorage。通过实现这些机制，sessionStorage / localStorage应该更直进，有效和安全的方式来取代饼干。存储事件 W3的定义StorageEvent界面如下:interface StorageEvent : Event {
readonly attribute DOMS
readonly attribute any oldV
readonly attribute any newV
readonly attribute DOMS
readonly attribute Storage storageA
void initStorageEvent(in DOMString typeArg, in boolean canBubbleArg,
in boolean cancelableArg, in DOMString keyArg, in any oldValueArg,
in any newValueArg, in DOMString urlArg, in Storage storageAreaArg);
};最著名的浏览器（最新版本）已实施StorageEvent，见下面的截图如下: {中六}通过阅读他们的文档:，这是行不通的！所以我在IE 9 RC展示StorageEvent，在下面的代码，我赞同存储事件，一旦sessionStorage / localStorage项目得到了改变，我检查存储的关键，以确定进一步的反应:if (window.addEventListener) {
window.addEventListener('storage', onStorageChanged, false);
else if (window.attachEvent) {
window.attachEvent("onstorage", onStorageChanged); }
alert('Sorry, your browser does not support DOM event subscription!');
function onStorageChanged(e) {
if (e.key != '') {
switch (e.key) {
case 'Counter': $('spCurCounter').innerHTML = 'Current Session Counter: ' + e.newValue + '';
case 'UserShoppingCart':
case 'UserProfile': break;
$('informationBar').innerHTML += 'New localStorage object added,
Key: [&span style="color: "&' + e.key + '&/span&]
Value: [&span style="color: "&' + e.newValue + '&/span&].
}下面的GIF显示，当我插入一个新的对象localStorage，onStorageChanged功能是在两个页面同时触发，并同时显示新插入的数据: {七}
注:，由于数据存储在localStorage可以访问域下所有页面实例，这些页面实例可以监测的变化（StorageEvent）同时，我们可以实现数据传递，跨越非常相同的timequot页，这是真的很难做事先。存储位置/格式让我们终于考虑如何浏览器存储localStorage:位置和数据格式。让我们在Windows 7上的IE9和谷歌浏览器为例，见下表:浏览器localStorage位置数据格式IE 9的RC％USERPROFILE％\应用程序数据\地方\微软\的Internet Explorer \ DOMStore \感叹的XML铬％USERPROFILE％\应用程序数据\本地\谷歌\铬\用户数据\ DEFAULT \本地存储SQLite的 IE 9的实际存储localStorage项目一个简单的XML文件，下面是XML存储在我的演示USERPROFILE对象:&root&
name="UserProfile"
value="{&NickName&:&Wayne&,&EmailAddress&
htime="" /&
&/root&铬商店{A12}两列简单的数据库表中的数据:键和值，下面的截图: {S8}演示代码N请下载{A13}。请注意，如果你测试我的连接的演示，或尝试在IE 9中的存储与Web相关的任何代码，请确保你在你的HTML头中添加X - UA -能力的元信息，或明确设定浏览模式/文件模式，以在IE浏览器开发工具的Internet Explorer 9的标准，否则你可能看到的JS错误，因为IE浏览器6,7不承认sessionStorage / localStorage。&meta http-equiv="X-UA-Compatible" content="IE=9" /& {S9}结论的HTTP cookie相比，HTML5 Web存储机制提供了相对更加方便，灵活，安全和速度更快的方式来存储HTTP状态数据，它应该逐渐取代HTTP cookie的，尤其是时下最流行的Web浏览器支持它（虽然可能有几个问题，如St​​orageEvent我上面提到的），他们不符合W3C标准的数据存储在sessionStorage / localStorage。伊恩希克森"预计HTML 5成为{A14}在2012quot阶段;，让我们期待和兴奋，看看事情在不久的将来。进一步阅读{A15}{A16}{A17}{A18}{A19}{A20}{A21}{A22}
最初发布于:
关于作者：
中国我是一名编程爱好者，谢谢为我们提供一个学习和分享的平台。有什么问题。可以就本内容回复，我看到时。会尽量回复的。
评论会员：
时间：谢谢。内容非常丰富评论会员：
时间：您好，你的文章是非常有趣和有用的的。现在，我对项目的工作，我需要实现一些功能，通过使用HTM5。我有我的5 评论会员：
时间：很好的文章，解释清楚评论会员：
时间：一个是什么来的方便预览仅仅因为代码的工作，它并不意味着它是良好的代码评论会员：
时间：很好的一个评论会员：
时间：大文章，谢谢评论会员：
时间：很好的文章。说明了一个简单的方法是什么，以及如何使用HTML5的sessionStorage和localStorage。非常感谢您评论会员：
时间：！非常感谢你和欣赏的鼓励编码快乐{S10} 韦恩叶 - 软件开发/技术铅野人
韦恩的野人生活 激情无限的编程评论会员：
时间：很容易理解的文章，写得很好。值得因为HTML 5现在知道这只是各地的用户在大量吸收的角落。尼斯之一韦恩评论会员：
时间：！非常感谢和赞赏鼓励编码快乐{S10} 韦恩叶 - 软件开发/技术铅野人
韦恩的野人生活 无限激情编程评论会员：
时间：你让我明白什么和如何sessionStorage和localStorage正在。我希望你会introdute HTML5的新的字符 acticles评论会员：
时间：！太感谢你了，欣赏鼓励编码快乐{S10} 韦恩叶 - 软件开发/技术铅野人
韦恩的野人生活 激情无限一种编程评论会员：
时间：！SunasaraImdadhusen:有几个失踪的影像对我来说，但内容却是很好韦恩叶评论会员：
时间：{S13}sunaSaRaImdadhusen snoopy001评论会员：
时间：您写了一篇文章abaout东西*公测*三年远离正在最后定稿。虽然文章很有意思，它有点无谓。韦恩叶评论会员：
时间：喜约翰​​，我同意您的意见"的HTML5*测试版*状态仍然是有可能三年达到完成状态"。不过，我很难接受你所说的文章是"毫无意义"{S14}从我的角度来看，正如我在后的书面的，"Web存储是一个革命性的的机制来存储HTTP状态"，现在最流行的浏览器已经支持它（指{A24}]），我的后专门来解释它是如何深入，我们使用它，我诚恳地请求您重新考虑您的意见，非常感谢你！编码快乐{S10}韦恩叶-软件开发/技术铅野人韦恩的野人生活激情无限的编程！韦恩叶评论会员：
时间：我给了5票。这要花我5分钟，以了解，HTML5的重要特征。是-它可能并不重要，只是现在。但在未来几年HTML5将是我们的基本信息景观的重要组成部分。这篇文章给了我一小片未来的难题。感谢 Bryian谭评论会员：
时间：非常感谢你史努比{S10}编码快乐{S10}韦恩叶-软件开发/技术铅野人韦恩的野人生活激情无限的编程！版韦尔奇评论会员：
时间：snoopy001写道:我给5票。我为你感到高兴。snoopy001写道:这要花我5分钟明白HTML5的重要特征同样，我为你感到高兴。snoopy001写道:HTML5将在未来几年是我们的基本信息景观的重要组成部分。你假设我们生存的玛雅历法结束。批准的时间HTML5是，"下一件大事"将"在路上"。snoopy001写道:这篇文章给了我未来的难题的一小片很大。太好了。我仍然不会改变我的投票。他从我3因为他写了beta版技术。（应该是2015），当它的批准，如果我们都还在这里（玛雅历法日结束），而如果作者编辑这篇文章，以反映在批准之前所做的更改，我会改变我的投票，但直到".45核心-因为拍摄两次只是傻"-JSOP，2010{BR}-----{BR}您可以从来没有太多的弹药-除非你游泳，或着火。-JSOP，2010{BR}-----{BR}"为什么你不配合你的脚踝周围煤油浸泡过的抹布，让蚂蚁不会爬上，吃你的糖果屁股。"-山谷Earnhardt，1997年韦恩叶评论会员：
时间：嗯，没有，2012年是未来......3的投票是没有其他事项{S10}谢谢您的投票这么多！事实上，我确实看到了一些真正优秀的文章数"1票"，我很幸运。{​​BR}编码快乐{S10}韦恩叶-软件开发/技术铅野人韦恩的野人生活激情无限的编程！马塞洛里卡多 - 奥利维拉评论会员：
时间：韦恩叶评论会员：
时间：domStorage也被滥用了很多。它的使用，以创建"supercookies"-不能被删除的Cookie。Luckly不够，还有一个Firefox插件"betterPrivacy"杀超级饼干
&桌面&网页开发&移动开发&数据库&多媒体&编程语言&平台，框架和库&编程通用&图形/设计&开发周期&一般阅读&第三方产品&作者资源&其他
快速解答标签
价值作最多Web Storage基本介绍
　　HTML5 定义了本地存储规范 Web Storage ， 提供了两种存储类型 API &sessionStorage 和 localStorage，二者的差异主要是数据的保存时长及数据的共享方式。
　　　　localStorage 一直存储在本地，数据存储是永久的，除非用户或程序对其进行删除操作；
　　　　sessionStorage在会话期内有效，数据在浏览器关闭后自动删除；
　　　　localStorage是基于域的，任何在该域内的页面都可以访问， sessionStorage在保存它的窗口，和由当前窗口创建的新窗口有效，直到相关联的标签页关闭；　
　　Web Storage其实是HTML4 中 cookies存储机制的一个改进版本，但是两种机制的功能又不相同：
　　　　cookie在浏览器和服务器间来回传递， sessionStorage和localStorage不会；
　　　　sessionStorage和localStorage的存储空间更大，有更多丰富易用的接口，各自独立的存储空间；
　　请注意以上区别，前端面试中，只要问到 html5 相关 基本就这些。
浏览器的支持情况
　　目前所有主流的浏览器都在一定程度上支持 HTML5 的 Web Storage特性。 由下图可以看出，基本上所有现代浏览器都已经支持 Web Storage。
　　移动浏览器的情况更为乐观
　　Android平台和 IOS 平台各自的浏览器都基本上支持 Web Storage 本地存储特性。 目前市场上的移动设备， 除了 android 手机和 iphone 手机外，越来越多的平板电脑面世，而且基本上依赖着两种平台。在移动端使用 Web Storage 我们几乎不需要考虑浏览器是否支持， 当然从代码的严谨来说，建议最好在使用前先检查浏览器是否支持
if (window.localStorage) {
// 浏览器支持 localStorage
if (window.sessionStorage) {
// 浏览器支持 sessionStorage
Web Storage API
interface Storage {
readonly attribute
DOMString? key(unsigned long index);
getter DOMString getItem(DOMString key);
setter creator void setItem(DOMString key, DOMString value);
deleter void removeItem(DOMString key);
void clear();
　　每个存储对象提供一个 key/value ( 键/值 ) 对列表， 被称为数据项。 key 可以是任意的字符串( 包括空字符串 )，value 也可以是任意的字符串。
　　规范定义的接口提供了:&
　　localStorage.length & & & & & & & & & & & & &一个只读的 length属性。 可以知道 localStorage 中存储着多少条数据
　　localStorage.setItem(key, val) & & & & &存储一条数据
　　localStorage.getItem(key) & & & & & & &&&通过 key 获取该条数据
　　localStorage.removeItem(key) & & & & &删除一条数据&
　　localStorage.clear() & & & & & & & & & & & & 清空所有 key/value 键值对 items
　　Storage 只能存储key/value对，而且只支持字符串类型的数据，&setItem() 方法传入的值都会自动转化为 string 类型。复合数据类型（Array Object）转化结果同 toString 方法。
&　　如果你想保存其它类型的数据，在保存的时候需要转化成字符串，在读取时，再转化回来；
　　使用 localStorage 存储和读取 JSON 格式数据：
// 定义JSON格式字符串
var userData = {
name: "zichen",
age: "24",
sex: "男",
adress: "杭州"
// 存储 userData 数据
localStorage.setItem("userData", JSON.stringify(userData));
// 读取 userData 数据并赋值给变量
var newUserData = JSON.parse(localStorage.getItem("userData"));
console.log(newUserData);
// 删除 userData
localStorage.removeItem("userData");
　　sessionStorage 浏览器支持情况同 localStorage ， 属性和方法及使用方式也和 localStorage一致。
Storage 事件监听
　　对 Storage 进行存取操作的同时，如果需进行监听，可以使用 HTML5 Web Storage API内置的事件监听器对数据进行监控， Storage中的数据有任何变动，Storage监听器都能捕获，接口定义：
interface StorageEvent : Event {
readonly attribute DOMS
readonly attribute DOMString? oldV
readonly attribute DOMString? newV
readonly attribute DOMS
readonly attribute Storage? storageA
　　key 表示属性中的键名。
　　oldValue 更新前的键值。
& & &newValue 数据更新后的键值。
　　url 记录 Storage 事件发生时的源地址。
　　StorageArea 指向事件监听对应的 Storage对象
　　使用&w3c 标准事件注册方法 addEventListener 进行注册监听：
window.addEventListener(&storage&,
function(e) {
console.log(e)
阅读(...) 评论()