HTML5的五种存储方式详解

Introduction本文主要介绍HTML5前端的几种存储方式的总结，包括localstorage本地存储、localstoragesessionstorage、离线缓存（应用程序缓存）、WebSQL、IndexedDB.有兴趣的可以了解一下。正文开始～大局在h5之前，cookies主要是用来存储的。cookies的缺点是请求头中有数据，大小在4k以内。主域被污染。主要应用：购物车、客户登录。IE浏览器有UserData，大小为64k，只有IE浏览器支持。目标是解决4k大小的问题。解决请求头经常携带存储信息的问题。解决关系存储的问题。跨浏览器1.本地存储。除非手动删除，否则无效。大小：每个域名5M支持：注意：IE9localStorage不支持本地文件，需要部署项目到服务器才支持！if(window.localStorage){alert('ThisbrowsersupportslocalStorage');}else{alert('ThisbrowserdoesNOTsupportlocalStorage');}常用API：getItem//获取记录setIten//设置记录removeItem//移除记录key//获取key对应的值clear//清除记录中存储的内容：数组、图片、json、样式、脚本。..（只要内容能序列化成字符串就可以存储）2.本地存储sessionstorageLocalStorage和HTML5的本地存储API中的sessionStorage的使用方法一样，不同的是sessionStorage在页面关闭后被清除，而localStorage将始终被保存。3、离线缓存（应用缓存）本地缓存应用需要的文件如何使用：①配置manifest文件页面：...Manifest文件：清单文件是简单的文本文件，告诉浏览器缓存什么（以及不缓存什么）。清单文件可分为三个部分：①CACHEMANIFEST-此标题下列出的文件将在首次下载后缓存②NETWORK-此标题下列出的文件需要连接到服务器，不会被缓存③FALLBACK-这里列出的文件title指定页面不可访问时的回退页面（例如404页面）完整演示：CACHEMANIFEST#2016-07-24v1.0.0/theme.css/main.jsNETWORK:login.jspFALLBACK:/html//offline在.html服务器上：清单文件需要配置正确的MIME类型，即“text/cache-manifest”。例如Tomcat：manifesttext/cache-manifest通用API：核心是applicationCache对象astatus属性，表示应用缓存的当前状态：0（UNCACHED）：无缓存，即没有与页面相关的应用缓存1（IDLE）：空闲，即应用缓存尚未更新2（CHECKING）：正在检查，即正在下载描述文件并检查更新3（DOWNLOADING）：正在下载，即应用程序缓存正在下载描述文件中指定的资源4（UPDATEREADY）：正在更新complete，所有资源已经下载完毕5（IDLE）：丢弃，即应用缓存的描述文件已经不存在，所以页面不能再访问应用缓存相关事件：表示应用缓存发生变化state:checking:当浏览器正在寻找应用程序的更新时触发icationcacheerror：检查更新或下载资源时发送错误时触发updateready在下载应用程序缓存的过程中不断下载文件时触发：在缓存的页面上新的应用程序缓存下载完成时触发：在应用程序中缓存完全可用时触发应用程序缓存的三个优点：①离线浏览②提高页面加载速度③减轻服务器压力注意事项：1.浏览器对缓存数据的容量限制可能不同（某些浏览器设置的限制为每个站点5MB）2.如果manifest文件，或者里面列出的某个文件不能正常下载，整个更新过程会被视为失败，浏览器会继续使用旧的缓存。3.引用manifest的html必须和manifest文件Source相同，在同一个域下4.浏览器会自动缓存引用manifest文件的html文件，导致需要更新版本才能更新ifHTML内容已更改。5、manifest文件中的CACHE与NETWORK和FALLBACK的位置顺序无关。如果它是一个隐式声明，它需要在顶部。6.FALLBACK中的资源必须与清单文件具有相同的来源。7、版本更新后，必须刷新一次。开启新版本（页面会刷新一次），需要添加监听版本事件。8、即使站点中的其他页面没有设置manifest属性，如果请求的资源在缓存中，也会从缓存中访问。9.当manifest文件发生变化时，资源请求本身也会触发更新。离线缓存与传统浏览器缓存的区别：1、离线缓存是针对整个应用的，而浏览器缓存是单个文件。2、离线缓存在网络断开的情况下仍然可以打开页面，但是浏览器缓存不起作用。3、离线缓存可以主动通知浏览器更新资源。4.WebSQL关系数据库，通过SQL语句访问WebSQLDatabaseAPI不是HTML5规范的一部分，而是一个独立的规范，引入了一套使用SQL操作客户端数据库的API。支持：WebSQL数据库适用于最新版本的Safari、Chrome和Opera浏览器。核心方法：①openDatabase：该方法使用现有数据库或新数据库创建数据库对象。②transaction：这个方法可以让我们控制一个事务，根据这个情况进行commit或者rollback。③executeSql：该方法用于执行实际的SQL查询。打开数据库：vardb=openDatabase('mydb','1.0','TestDB',2*1024*1024,fn);//openDatabase()方法对应的五个参数分别是：数据库名，版本号，描述文本，数据库大小，创建回调以执行查询操作：vardb=openDatabase('mydb','1.0','TestDB',2*1024*1024);db.transaction(function(tx){tx.executeSql('CREATETABLEIFNOTEXISTSWIN(唯一的，名字)');});插入数据：　vardb=openDatabase('mydb','1.0','TestDB',2*1024*1024);db.transaction(function(tx){tx.executeSql('CREATETABLEIFNOTEXISTSWIN(idunique,name)');tx.executeSql('INSERTINTOWIN(id,name)VALUES(1,"winty")');tx.executeSql('INSERTINTOWIN(id,name)VALUES(2,"LuckyWinty")');});读取数据：db.transaction(function(tx){tx.executeSql('SELECT*FROMWIN',[],function(tx,results){varlen=results.rows.length,i;msg="

查询记录数："+len+"