HTML5 Storage API

原文:HTML5 Storage API Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多. 在Web Storage出现之前,远程的Web服务器需要存储客户端和服务器间交互使用的所有相关数据.cookie是一个在服务器和客户端间来回传送文本值的内置机制.服务器可以基于其放在cookie中的数据在不同web页面间跟踪用户的信息.用户每次访问某个域是,cookie数据都会被来回传送. 尽管coo…

一篇文章图文并茂地带你轻松学会 HTML5 storage

html5 storage api localStorage 和 sessionStorage 是 html5 新增的用来存储数据的对象,他们让我们可以以键值对的形式存储信息. 为什么要有 storage ? 我们已经有了 session 可以帮助我们存储信息,为何还需要 storage 呢? 各个浏览器的 cookie 长度大概只能在 4kb 左右,而 storage 大概能达到 5M,这意味着可以存储更多的信息 cookie 可以被后端更改,在每次进行网络请求的时候都会被发送给服务器,而 s…

[转]使用 HTML5 IndexedDB API

本地数据持久性提高了 Web 应用程序可访问性和移动应用程序响应能力索引数据库 (IndexedDB) API(作为 HTML5 的一部分)对创建具有丰富本地存储数据的数据密集型的离线 HTML5 Web 应用程序很有用.同时它还有助于本地缓存数据,使传统在线 Web 应用程序(比如移动 Web 应用程序)能够更快地运行和响应.本文将介绍如何管理 IndexedDB 数据库. HTML5 的一个重要特性是本地数据持久性,它使用户能够在线和离线访问 Web 应用程序.此外,本地数据持久性使移动应…

web API简介(三)：客户端储存之Web Storage API

概述前篇:web API简介(二):客户端储存之document.cookie API 客户端储存从某一方面来说和动态网站差不多.动态网站是用服务端来储存数据,而客户端储存是用客户端来储存数据. Web Storage API就是现代HTML5客户端储存的方法之一. Web Storage介绍 web storage的概念和cookie相似,区别是它是为了更大的容量存储设计的.cookie数据不能超过4K而且有最大条数限制,同时因为每次http请求都会携带cookie,所以cookie只适合保…

使用HTML5 WebStorage API构建与.NET对应的会话机制

HTML5的Web Storage API,我们也称为DOMStarage API,用于在Web请求之间持久化数据.在Web Starage API 出现之前,我们都是将客户端和服务端之间的交互数据存储在远程服务器上,随着Web Starage API的出现,我们可以在客户端存储我们重复访问的交互数据,用户在打开浏览器的时候,可以快速地读取到数据,减少了用户等待,数据流量. 在Web Starage 出现之前,我们在客户端存储数据一般使用Cookie,用于客户端和服务端之间保存会话标识符,同时可…

HTML5 程序设计 - 使用HTML5 Canvas API

请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方便查看. 学习笔记,纯手工码字,有错别字什么的请指出,觉得好的请点个赞小小的支持下.谢谢亲们. 本篇,我们将探索如何使用HTML5和Canvas API.Canvas API很酷,可以通过它来动态生成和展示图形.图表.图像以及动画. 本篇将使用渲染API(Rendering API)的基本功能来创建…

HTML5 Drop API

转自:http://www.cnblogs.com/fsjohnhuang/p/3961066.html 一.前言在HTML4的时代,各前端工程师为了实现拖拽功能可说是煞费苦心,初听HTML5的DnD API觉得那些痛苦的日子将一去不复返,但事实又是怎样的呢?下面我们一起来看看DnD API的真面目吧! 二.由于篇幅较长,特设目录一陀三.HTML4下实现简单拖拽四.HTML5下实现简单拖拽五.如何启用DnD效果六.draggable属性详解七.DnD的生命周期八.DnD中最重…

Three.js + HTML5 Audio API 打造3D音乐频谱，Let’s ROCK!

继续玩味之前写的音乐频谱作品,将原来在Canvas标签上的作图利用Three.js让它通过WebGL呈现,这样就打造出了一个全立体感的频谱效果了. 项目详情及源码项目GitHub地址:https://github.com/Wayou/3D_Audio_Spectrum_VIsualizer/tree/master 在线演示地址:http://wayou.github.io/3D_Audio_Spectrum_VIsualizer 如果你想的话,可以从这里下载示例音乐:http://pan.b…

HTML5 File API — 让前端操作文件变的可能

前言在 HTML5 File API 出现之前,前端对于文件的操作是非常有局限性的,大多需要配合后端实现.出于安全角度考虑,从本地上传文件时,代码不可能获取文件在用户本地的地址,所以纯前端不可能完成一些类似图片预览的功能.但是 File API 的出现,让这一切变成了可能. 跟着楼主由浅入深,了解下强大的 File API 吧. FileList FileList 对象针对表单的 file 控件.当用户通过 file 控件选取文件后,这个控件的 files 属性值就是 FileList 对象.…

开大你的音响，感受HTML5 Audio API带来的视听盛宴

话说HTML5的炫酷真的是让我爱不释手,即使在这个提到IE就伤心不完的年代.但话又说回来,追求卓越Web创造更美世界这样高的追求什么时候又与IE沾过边儿呢?所以当你在看本文并且我们开始讨论HTML5等前沿东西的时候,我们默认是把IE排除在外的.本文的例子可以工作在最新的Chrome及Firefox浏览器下,其他浏览器暂未测试. 若下方未出现演示页面请刷新. 你也可以点此全屏演示或者前往GitHub进行代码下载然后本地运行. 你还可以下载示例音乐(如果你手头没有音频文件的话) 文件列表:bb…

html5 history api

1.html5 history api适用场景,个人理解最大的用处是配合ajax使用,使ajax拥有回退.前进的用户体验. 2.代码(dive into html5中的一个小例子) 1)fer.html <!DOCTYPE html> <html> <head> <title>history api test</title> </head> <body> <aside id="gallery"&g…

HTML5 history API实践

一.history API知识点总结在HTML4中,我们已经可以使用window.history对象来控制历史记录的跳转,可以使用的方法包括: history.forward();//在历史记录中前进一步 history.back();//在历史记录中后退一步 history.go(n);//在历史记录中跳转n步,n=0则刷新当前页,n=-1则后退一步在HTML5中,又新增了四个可用的API,包括: history.pushState(data[,title][,url]);//向历史记录中…

Resumable.js – 基于 HTML5 File API 的文件上传

Resumable.js 是一个 JavaScript 库,通过 HTML5 文件 API 提供,稳定和可恢复的批量上传功能.在上传大文件的时候通过每个文件分割成小块,每块在上传失败的时候,上传会不断重试直到程序完成.这允许上传到本地或服务器的网络连接丢失后能够自动恢复上传. 此外,它允许用户暂停,恢复,甚至恢复上传不失状态,因为只有目前上传块将被中止,而不是整个上传.Resumable.js 除了 HTML5 文件 API 意外,没有任何外部依赖.目前,这意味着支持仅限于 Firefox 4+…

html5 drag api详解

可以夸张点说,如果你不会拖拽,你不是一个合格的前端开发. 回想下,以前我们是怎么实现拖拽的,主要有以下几步: 1.目标元素绑定mousedown事件,记录下此时鼠标位置和拖拽元素的位置差,分别是 diffX ,diffY 2.在mousedown中绑定 document的mousemove 以及mouseup 3.在mousemove中计算拖拽元素的位置: x = event.clientX - diffX ,y = event.clientY - diffY 4.mouseup时中销毁绑定的…

html5 Canvas API

详细内容请点击 1.HTML Canvas API有两方面优势可以弥补:首先,不需要将所绘制图像中的每个图元当做对象存储,因此执行性能非常好:其次,在其他编程语言现有的优秀二维绘图API的基础上实现Canvas API相对来说比较简单.2.在网页上使用canvas元素时,它会创建一块矩形区域.默认情况下该矩形区域宽为300像素,高为150像素,但也可以自定义具体的大小或者设置canvas元素的其他特性.复制代码 1 <body> 2 <div> 3 <header> 4…

HTML5 File api 实现断点续传

目前市场上大多数的网站的断点上传都是需要安装浏览器插件的,本文就针对高级浏览器的环境下,通过HTML5 File api实现断点上传进行说明一.实现文件多选 HTML5的<input>新增了"multiple"属性,该属性可接受多个值的文件上传字段 <input type="file" multiple="multiple" name="file" id="file"> 添加了该属…

HTML5 file api读取文件的MD5码工具

1.工具的用途:用HTML5 file api读取文件的MD5码.MD5码在文件的唯一性识别上有很重要的应用,业内常用MD5进行文件识别.文件秒传.文件安全性检查等: 2.适用性:IE.Chrome皆兼容: 3.缺陷:当上传大文件时,需要较长的时间才能扫描出MD5码: 4.关于引用:其中引用了js文件(spark-md5.js) <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo…

转: html5 history api详解~很好的文章

从Ajax翻页的问题说起请想象你正在看一个视频下面的评论,在翻到十几页的时候,你发现一个写得稍长,但非常有趣的评论.正当你想要停下滚轮细看的时候,手残按到了F5.然后,页面刷新了,评论又回到了第一页,所以你又要重新翻一次. 再或者,你想把这个评论发给别人分享,一面给了别人页面地址(为什么不直接复制呢?因为要连带视频等场景啊),一面又要加一句嘱咐:请翻到下面评论的第XX页的XX楼. 这就是问题.试想一下,如果浏览器能记住你当前的状态(比如看到了第十几页),而不是一刷新就还原,是不是就显得智能多了…

使用 HTML5 webSocket API实现即时通讯的功能

project下载地址:http://download.csdn.net/detail/wangshuxuncom/6430191 说明: 本project用于展示怎样使用 HTML5 webSocket API实现即时通讯的功能. 本project编码方式:UTF-8 功能说明: 1.本功能支持多人聊天: 2.有人上线或下线时,会话窗体会自己主动显示: …

Html5 Device API详解

三.四月曾学习过html5相关知识,并就html5 device api做过一次讲解课程时长一个小时,预期达到level 200目标,即知道html5 device api是什么,且知道怎么实现面向人群为有javascript基础但无device api经验的同学这里把录制的视频分享一下,课程地址…

HTML5 Geolocation API工作原理[转载]

大家都知道,HTML5 Geolocation 可以使用 IP 地址.基于 Web 的数据库.无线网络连接和三角测量或 GPS 技术来确定经度和纬度. 问题: 在一个基于地理位置服务的个人业余项目(小伙伴在哪儿)中,发现用PC获取的地理位置与手机端获取的地理信息存在微小的差距,PC端会经常出现获取不到地理位置的情况,PC端和手机端的Geolocation是否有什么底层实现方面的差别呢,HTML5又是根据什么原则来确定应该采用何种方式来确定经度和纬度信息呢? 带着这个问题,作者查阅了一些资料,得出…

HTML5 classList API接口

原文地址:HTML5 classList API 原文日期: 2010年07月13日翻译日期: 2013年08月23日当我陷入JavaScrip和JavaScript类库框架之中时,我总是有种希望:什么时候浏览器厂商才能用本地代码原生地实现这些由工具类库所提供的方法呢? 我也知道标准的重要性,然而厂商们几乎不可能花大价钱钱仅仅为了实现这些功能.但是我相信他们会,而且是快马加鞭的实现. 好消息当然是其中的一个功能已经被纳入HTML5标准API: classList. classList对象在H…

HTML5 History API & URL 重定向

HTML5 History API & URL 重定向 disabled server url redirect https://developer.mozilla.org/en-US/docs/Web/API/History_API https://css-tricks.com/using-the-html5-history-api/ window.history.back(); window.history.go(-1); window.history.forward(); window.h…

RSS & Server-Sent Events & HTML5 Notification API

RSS Rich Site Summary https://en.wikipedia.org/wiki/RSS https://www.lifewire.com/what-is-rss-2483592 Rich Site Syndication (RSS) https://www.makeuseof.com/tag/rss-dead-look-numbers/ https://www.cnblogs.com/xgqfrms/p/5918024.html Server-Sent Events ht…

HTML5 Geolocation API地理定位整理（二）

Geolocation 实例demo 1.使用watchPosition()监听客户端位置 var watchOne=null; if (navigator.geolocation) { //watchPosition()---用于监听客户端位置 //此方法没有固定的时间间隔,尤其在PC端很多时候会获取位置出错 //在监听的过程中有时也会出错,在PC端很多时候从https://www.googleapis.com/获取位置信息 //在火狐中关于位置的描述:https://www.mozilla.…

HTML5 Geolocation API地理定位整理（一）

HTML5 Geolocation API 用于获得用户的地理位置. 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的. 浏览器支持 Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 支持Geolocation(地理定位). 注意: 1. Geolocation(地理定位)对于拥有 GPS 的设备,比如 iPhone,地理定位更加精确.点击查看更多参考 2.在微信的WebView中可以获取位置,QQ的WebView中…

HTML5 File API 全介绍

在 HTML5 File API 出现之前,前端对于文件的操作是非常有局限性的,大多需要配合后端实现.出于安全角度考虑,从本地上传文件时,代码不可能获取文件在用户本地的地址,所以纯前端不可能完成一些类似图片预览的功能.但是 File API 的出现,让这一切变成了可能. 1.FileList 对象 FileList 对象针对表单的 file 控件.当用户通过 file 控件选取文件后,这个控件的 files 属性值就是 FileList 对象.它在结构上类似于数组,包含用户选取的多个文件.如果…

HTML5 History API让ajax能回退到上一页

HTML5 History API提供了一种功能,能让开发人员在不刷新整个页面的情况下修改站点的URL.这个功能很有用,例如通过一段JavaScript代码局部加载页面的内容,你希望通过改变当前页面的URL来反应出页面内容的变化,这时该功能可以派上用场. 举个例子,当用户从首页进入帮助页面时,我们通过Ajax来加载帮助页面的内容.然后这个用户又转到产品页面,我们需要再一次通过Ajax请求来替换页面的内容.当用户想分享页面的URL时,通过History API,我们可以改变页面的URL来反应内容的…

window.history的跳转实质－HTML5 history API 解析

在上一浏览器跳转行为的测试中,我们看到了通过不同的方法操作浏览器跳转时,它的刷新表现有所不同,在这一文章中,将看看,为何会产生这样的不同?其背后的实质是什么?浏览器的访问历史记录到底是如何运作的呢? 1.简介 window.history是用来保存用户在一个会话期间的网站访问记录,并提供相应的方法进行追溯.其对应的成员如下: 方法:back().forward().go(num).pushState(stateData, title, url).replaceState(stateData, t…

通过HTML5 Visibility API检测页面活动状态

几年前,我们浏览网页的时候是没有选项卡浏览模式的,每一个网页都会是一个浏览器窗口,如果我没有记错,Win7之前我们都是这样浏览网页的.作为一个程序员,我们经常会同时打开10-15个网页,多的时候超过20个也不足为奇. 为什么要使用这个API? 早期我们没有办法确定哪些选项卡是活动状态的,但是现在通过HTML Visibility API,我们可以检测访客是否正在浏览我们的界面. 在这个教程中我们会介绍如何使用HTML5 Visibility API,同时我们也为你准备了一个简单的demo来查看页…

【HTML5 Storage API】的更多相关文章