前端几种存储方式的总结

总体情况h5之前，存储主要是用cookies。cookies缺点有在请求头上带着数据，大小是4k之内。主domain污染。

主要应用：购物车、客户登录对于ie浏览器有userdata，大小是64k,只有ie浏览器支持。目标解决4k的大小问题解决请求头常带存储信息的问题解决关系型存储的问题跨浏览器1.本地存储localstorage存储方式：以键值对(key-value)的方式存储，永久存储，永不失效，除非手动删除。大小：每个域名5m支持情况：注意：ie9localstorage不支持本地文件，需要将项目署到服务器，才可以支持!检测方法：if(window.localstorage){alert('thisbrowsersupportslocalstorage');}else{alert('thisbrowserdoesnotsupportlocalstorage');}常用的api：getitem//取记录setiten//设置记录removeitem//移除记录key//取key所对应的值clear//清除记录存储的内容：数组，图片，json，样式，脚本。。。(只要是能序列化成字符串的内容都可以存储)2.本地存储sessionstoragehtml5的本地存储api中的localstorage与sessionstorage在使用方法上是相同的，区别在于sessionstorage在关闭页面后即被清空，而localstorage则会一直保存。3.离线缓存(applicationcache)本地缓存应用所需的文件使用方法：①配置manifest文件页面上：manifest文件：manifest文件是简单的文本文件，它告知浏览器被缓存的内容(以及不缓存的内容)。manifest文件可分为三个部分：①cachemanifest-在此标题下列出的文件将在首次下载后进行缓存②network-在此标题下列出的文件需要与服务器的连接，且不会被缓存③fallback-在此标题下列出的文件规定当页面无法访问时的回退页面(比如404页面)完整demo：cachemanifest#2016-07-24v1.0.0/theme.css/main.jsnetwork:login.jspfallback:/html//offline.html服务器上：manifest文件需要配置正确的mime-type，即"text/cache-manifest"。如tomcat:manifesttext/cache-manifest常用api：核心是applicationcache对象，有个status属性，表示应用缓存的当前状态：0(uncached):无缓存，即没有与页面相关的应用缓存1(idle):闲置，即应用缓存未得到更新2(checking):检查中，即正在下载描述文件并检查更新3(downloading):下载中，即应用缓存正在下载描述文件中指定的资源4(updateready):更新完成，所有资源都已下载完毕5(idle):废弃，即应用缓存的描述文件已经不存在了，因此页面无法再访问应用缓存相关的事件：表示应用缓存状态的改变：checking:在浏览器为应用缓存查找更新时触发error:在检查更新或下载资源期间发送错误时触发noupdate:在检查描述文件发现文件无变化时触发downloading:在开始下载应用缓存资源时触发progress：在文件下载应用缓存的过程中持续不断地下载地触发updateready:在页面新的应用缓存下载完毕触发cached:在应用缓存完整可用时触发applicationcache的三个优势：①离线浏览②提升页面载入速度③降低服务器压力注意事项：1.浏览器对缓存数据的容量限制可能不太一样(某些浏览器设置的限制是每个站点5mb)2.如果manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程将视为失败，浏览器继续全部使用老的缓存3.引用manifest的html必须与manifest文件同源，在同一个域下4.浏览器会自动缓存引用manifest文件的html文件，这就导致如果改了html内容，也需要更新版本才能做到更新。5.manifest文件中cache则与network，fallback的位置顺序没有关系，如果是隐式声明需要在最前面6.fallback中的资源必须和manifest文件同源7.更新完版本后，必须刷新一次才会启动新版本(会出现重刷一次页面的情况)，需要添加监听版本事件。8.站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问9.当manifest文件发生改变时，资源请求本身也会触发更新点我参考更多资料!离线缓存与传统浏览器缓存区别：1.离线缓存是针对整个应用，浏览器缓存是单个文件2.离线缓存断网了还是可以打开页面，浏览器缓存不行3.离线缓存可以主动通知浏览器更新资源4.websql关系数据库，通过sql语句访问websql数据库api并不是html5规范的一部分，但是它是一个独立的规范，引入了一组使用sql操作客户端数据库的apis。支持情况：websql数据库可以在最新版的safari,chrome和opera浏览器中工作。核心方法：①opendatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。②transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。③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(idunique,name)');});插入数据：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+"";document.queryselector('#status').innerhtml+=msg;for(i=0;i