HTML5中的本地、WebSql、离线应用存储

简介: 1.   HTML5存储相关API a)   Localstorage 本地存储 b)   Web Sql DataBase 本地数据库存储 c)   .manifest 离线应用存储 2.   HTML5 localStorage 本地存储: a)   本地存储是一个window的属性:, 相当于一个大型的Cookie; b)   window.

1.   HTML5存储相关API

a)   Localstorage 本地存储

b)   Web Sql DataBase 本地数据库存储

c)   .manifest 离线应用存储

2.   HTML5 localStorage 本地存储:

a)   本地存储是一个window的属性:, 相当于一个大型的Cookie;

b)   window.localStorage :

c)   set方法:

        i.      localStorage.t1 = “aaa”;

       ii.      localStorage[t2] = “bbb”;

     iii.      localStorage.setItem(“t3”, “ccc”);

d)   get方法:

        i.      localStorage.t1;

       ii.      localStorage[t1];

     iii.      localStorage.getItem(“t1”);

e)   delete方法:

        i.      localStorage.removeItem();

       ii.      localStorage.clear(); // 清除所有;

f)   遍历方法:

        i.      localStorage.length;

       ii.      localStorage.key(); 

3.   HTML5 Web Sql Database 数据库:

a)   Web Sql 数据库API 实际上不是HTML5规范的组成部分;

b)   在HTML5之前就已经存在了,是单独的规范;

c)   它是将数据以数据库的形式存储在客户端,根据需求去读取;

d)   跟Storage的区别是: Storage和Cookie都是以键值对的形式存在的;

e)   Web Sql 更方便于检索,允许sql语句查询;

f)   让浏览器实现小型数据库存储功能;

g)   这个数据库是集成在浏览器里面的,目前主流浏览器基本都已支持;

4.   HTML5 Web DataBase 操作:

a)   openDatabase() :

        i.      window.openDatabase(“数据库名”,”指定数据库版本1.0或2.0”,”数据库描述”,数据库大小,字节);

       ii.      创建数据库对象,可以使用已有数据库,也可以创建新的数据库;

     iii.      返回一个对象;

b)   transaction() :

        i.      database.transaction(fn(obj));

       ii.      用于触发操作;参数是一个匿名函数;

c)   executeSql() :

        i.      tx.executeSql(sql语句,sql参数, 返回源,错误);

       ii.      用于执行sql

5.   HTML5 本地离线应用存储:

a)   与HTML5 本地存储、本地数据库的关系;

6.   离线应用:

a)   Web2.0技术鼓励个人参与,每个人都是web内容的撰写者,如微博;

b)   Web应用能够提供离线的功能,让用户在没有网络的地方也能进行内容撰写,等到有网络的时候,再同步到web上;

c)   离线应用在首次加载的时候把所有资源下载下来,缓存到本地,离线应用与浏览器的缓存是不同的,我们可以指定缓存的内容,也可以指定那些东西是需要读取数据库的;

d)   HTML5对离线功能的支持,在第一次访问的时候会去访问服务器,并且下载一个存储清单,从清单中依次下载里面的内容,存储到指定位置,当我们清除浏览器缓存的时候,是不会清除到这些内容的,这些内容是指定存储的,浏览器二次访问的时候,就算是断网了还是可以去访问这些缓存到本地的内容的;用户在断网期间的操作,通过web sql存储下来,等联网的时候将本地的数据传上去;

7.   HTML5 实现离线应用  操作:

a)   配置服务器:

        i.      让服务器支持.manifest类型文件;

       ii.      AddType text/cache-manifest .manifest

b)   创建manifest文件: (存储清单)

        i.      CACHE MANIFEST  // 声明文件头部

       ii.      #This is a comment

     iii.      CACHE  // 离线存储文件

       iv.      NETWORK  // 需要网络调用的文件

        v.      FALLBACK   // 资源失效或不可用时更新文件

    c)  关联manifest文件到 html文档

      

8.   HTML5离线内容更新:

a)   自动更新:

b)   手动更新:

 i.      检测window.applicationCache.status的值;如果是UPDATEREADY

 ii.      使用 window.applicationCache.update更新缓存;

目录
相关文章
|
存储 Web App开发 移动开发
HTML5 Web 存储详解
HTML5 Web存储提供了两种客户端数据存储机制:**Local Storage**和**Session Storage**。Local Storage用于长期存储数据,即使关闭浏览器数据也依然存在,适用于保存用户偏好设置等信息。Session Storage则在标签或窗口关闭时清除数据,适合存储临时信息。两者均提供了简单的API进行数据的存取操作,但需要注意的是,Web存储并非加密存储,不应存放敏感信息。现代浏览器普遍支持Web存储,合理利用这两种存储方式可提升Web应用的用户体验。
|
存储 缓存 移动开发
创建一个 HTML5 离线应用
【10月更文挑战第6天】
478 58
|
移动开发 前端开发 JavaScript
HTML5 新的 Input可以有哪些好玩的应用
HTML5的新输入类型为应用带来了多种创新和互动功能,显著提升了用户体验和界面趣味性。例如,颜色选择器可动态改变网站主题色;滑块控制适用于音量或亮度调节;日期和时间输入便于预约系统的设计;互动式表单结合多种输入类型实现高效的数据收集;猜数字游戏增加用户参与度;实时搜索建议优化网站搜索功能;图像预览功能让用户上传图片前预览效果;密码可见性切换按钮提升表单的可用性;结合用户位置的电话号码输入则能提供附近服务信息。这些应用场景不仅使网站更具吸引力,还增强了用户的互动体验。
|
机器学习/深度学习 移动开发 自然语言处理
HTML5与神经网络技术的结合有哪些其他应用
HTML5与神经网络技术的结合有哪些其他应用
278 3
|
JavaScript 前端开发 UED
HTML 超链接的多种类型及应用
【10月更文挑战第17天】HTML 超链接类型丰富多样,它们共同构成了网页中不可或缺的导航和交互元素。通过合理地选择和运用这些超链接类型,我们可以为用户创造更加流畅和便捷的浏览体验,提升网站的可用性和吸引力。
1079 1
|
SQL 存储 移动开发
HTML5 Web SQL 数据库详解
Web SQL 数据库是 HTML5 中的一种本地存储技术,允许在浏览器中使用 SQL 语言操作本地数据,支持离线访问和事务处理,适用于缓存数据和小型应用。然而,其存储容量有限且仅部分现代浏览器支持,标准已不再积极维护,未来可能被 IndexedDB 和 localStorage 等技术取代。使用时需谨慎考虑兼容性和发展前景。
|
存储 移动开发 缓存
HTML5的离线应用
【10月更文挑战第6天】
|
存储 移动开发 缓存
HTML5 Web 存储详解
HTML5 Web 存储包括 `localStorage` 和 `sessionStorage`,前者提供持久存储且无过期时间,后者仅在会话期间有效。两者均支持键值对形式存储数据,容量约为 5-10 MB。`localStorage` 适用于用户偏好设置、登录状态保持及离线应用缓存;`sessionStorage` 则用于临时数据如表单输入。数据以字符串形式存储,可通过 `JSON` 方法处理对象。由于数据存储于本地,不适合存放敏感信息。示例代码展示了如何使用按钮将输入框内容保存至 `localStorage` 并进行清除操作。
|
移动开发 JavaScript 数据管理
HTML5 拖放在游戏中的应用
HTML5的拖放功能在游戏开发中广泛应用,尤其在创建交互式网页游戏时。它支持多种场景,如拖动角色或物品、选择和装备物品、拼图或配对游戏以及自定义界面布局。通过简单的HTML和JavaScript代码,可实现流畅的拖放交互,并提供视觉反馈,增强用户体验。此外,还需考虑设备兼容性和数据管理,确保游戏在不同设备和浏览器上都能良好运行。总之,HTML5拖放功能使网页游戏更生动有趣。
|
存储 移动开发 搜索推荐
HTML5 常用存储类型
HTML5 常用存储类型
264 5