浅析HTML5 数据存储的方法及应用.docVIP

浅析HTML5 数据存储的方法及应用 　　摘要：在 HTML5标准之前，Web存储信息需要cookie来完成，Web Storage存储机制是对HTML4中cookies存储机制的一个改善。由于cookies存储机制有很多缺点，HTML5中不再使用它，转而使用改良后的Web Storage存储机制。 　　关键词：HTML5；本地存储；Web Storage 　　中图分类号：TP37 文献标识码：A 文章编号：1009-3044（2016）13-0011-03 　　Abstract：： Before the HTML standard， Web information stored need cookies to complete. But is probably the appearance of 4 KB， and early version only supports IE each domain name dozens of cookies， too little. As they passed by each request to the server， thus obtained is slow and inefficient. Therefore， in HTML， Web storage API for users to store user information on the computer or device for the definition of data standards. 　　Key words： HTML5；local store；Web Storage 　　1 HTML5本地存储简介 　　HTML5中新增的功能之一是本地数据库，使用本地数据库可以在客户端本地建立一个数据库，该数据库以前是必须要保存在服务器端数据库中的内容，现在可以直接保存在客户端本地了，这大大减轻了服务器端的负担，同时也加快了访问数据的速度。该技术在网页中把键值对存储浏览器客户端，这些数据可以跨越浏览器的刷新以及关闭和重新打开。对于HTML5规范的一部分接口，可以依赖任何第三方插件，浏览器都可以原生支持。 　　本文主要分析HTML5的本地存储技术，以Firefox浏览器为例介绍 HTML5的几种本地存储技术。 　　本地存储的方法为：Web Storage（又分为LocalStorage 和Session Storage）、Web SQL等。不同的场合使用不同种类的本地存储方法。下面将分别介绍这几种本地存储机制。 　　2 Web Storage简介 　　在Web上存储数据的功能，即Web Storage功能。Web Storage功能的存储主要是针对客户端本地。Web Storage的存储功能包含session Storage 和local Storage两种不同的存储类型。session Storage和local Storage，它们都能支持在同域下存储5MB数据，这相比cookies有着明显的优势，这是能够正确区分会话数据和长期数据。 　　2.1 session Storage对象 　　Session即会话，是针对一个会话， session Storage则是将数据保存在session对象中。用户在浏览网站时，用户从打开网站到关闭网站所经过的整个时间，这段时间就是用户浏览网站所花费的时间。其中任何数据都保存在session对象中，同时仅在同一的会话页面中，数据才能访问，一旦会话结束，所有的数据将销毁。 　　2.2 local Storage对象 　　local Storage对象则是将数据保存在客户端本地的硬件设备中，如果浏览器被关闭，但这些数据还是存在的。当用户再次打开浏览器访问网站时，local Storage对象中的数据仍然可以继续使用。由此分析，我们可知临时保存用Session Storage，永久保存用local Storage。 　　1）清空local Storage数据 　　local Storage的clear（）函数用于清空同源的本地存储数据，如local Storage.clear（），它将删除所有本地存储的local Storage数据。而 Web Storage的另外一部分Session Storage 中的clear函数只清空当前会话存储的数据。 　　2）遍历local Storage数据 　　遍历local Storage数据主要用到两个方法length 和key， length表示中保存的数据总量，key表示保存数据时的键名项，索引号（index）表示第几条键名对应的数据记录。索引号（index）以0值开始，如果取第3条键名对应的数据，inde