静态资源存储在localstorage存储数组有什么缺点

输入关键字或相关内容进行搜索
HTML5+的离线本地存储有如下多种方案:
HTML5标准方案:cookie、localstorage、sessionstorage、websql、indexedDB
HTML5Plus扩展方案:plus.navigator.setCookie、plus.storage、plus.io
体量最小,可以设置过期时间。不能跨域。
localstorage
适合key、value键值对的存储,数据量一般不超过5M。是常用的轻量数据存储方案。不能跨域。
sessionstorage
也是键值对,特点是关闭App就消失了,也不能跨webview,一般不用于持久化数据保存。
是手机端关系型数据库的最佳方案,各种手机都支持。只是该标准不再更新。但是目前手机端重量数据存储的唯一可商用方案。
是HTML5里最新的数据存储规范,但不是基于SQL,而是基于对象。
indexedDB性能更高,全是异步处理,学习难度偏大。最重要的是目前手机端支持度不行。Android4.4以上和iOS8以上才支持indexedDB。
plus.navigator.setCookie
与HTML5的标准cookie相比,plus的扩展主要是为了跨域。所谓跨越,就是本地HTML页面和服务器HTML页面共享cookie数据,或者说本地页面的js可以操作服务器页面产生的cookie。如果没有跨越需求,不需要使用plus扩展。
plus.storage
plus.storage也是键值对数据存储。它是把OS给原生App使用的键值对存储数据库封装一层给JS使用。
plus.storage没有理论上的大小限制。
plus.storage相比于localstorage 还有一个特点是可跨域。当一个存储数据,需要被本地和来自服务器的页面同时读写时,就涉及跨域问题。此时HTML5的localstorage不能满足需求,只能使用plus.storage。
plus.storage操作要比localstorage慢几十毫秒,如果不是因为大小限制或跨越,尽量使用localstorage。
有网友封装了一个框架,针对key-value数据,在localstorage超过5m时自动切换到plus.storage,参考。虽然这么做听起来有点复杂,但我们对这种追求性能极致的开发者非常赞赏。
plus.io是文件读写,虽然也可以通过读写txt等文件存储数据,但并不如专业的storage和websql方便。
plus.io更多的是用于图片等多媒体文件的本地保存。
比如图文列表的离线使用,一般有2种做法:
图片下载不通过img的src,而是plus.dowload下载的,先下载图片,存好路径后,然后img的src动态指定文件路径
图片使用img的src下载,然后用canvas把img存成图片文件。下次不联网,img的scr直接指向本地文件
\n有人问原生的sqllite是否可用,5+里没有封装,推荐使用HTML5标准的数据库。
还有人问为啥不封装sqllite?因为HTML5已经有了,HTML5+规范无法重复立项。
HTML5+从属于w3c指导下的联盟,DCloud也是w3c会员,重复发明轮子没有好处,只会增加工作量和增大包体积。有人问三方清理工具清理垃圾会不会造成某些数据丢失,这个可能性是存在的,但概率并不高,取决于清理软件会不会分析你的存储数据里哪些是可以清除的垃圾数据。除了OS的清理工具外,一般没有root权限的清理工具是拿不到除了plus.io外的你的app的存储数据的。
要是支持下sqlite多好,多方便啊
HTML5有的东西,为什么还要重复发明轮子?还得增大基座包的体积。
是手机端关系型数据库的最佳方案,各种手机都支持。只是该标准不再更新。但是目前手机端重量数据存储的唯一可商用方案。
Android 集成了 SQLite 数据库 Android 在运行时(run-time)集成了 SQLite,所以每个 Android 应用程序都可以使用 SQLite 数据库。
并且查询了下,ios也可以使用sqlite,所以说为啥成了手机端重量数据存储的唯一可商用方案。
不犟了,研究研究websql
HTML5Plus的立项非常严谨,最后都是要提交给W3C的。所以sqllite的封装肯定是无法立项的。
嗯,可以接受,对了,怎么找到那个 websql数据库的路径呢在h5+中,非常感谢大拿
这个是HTML5标准写法,度一下吧。h5+不会干扰原有写法,只是补充了plus开头的一批api
哦了,谢谢
挺好的,我的App用了LocalStorage,感受到了5M的限制!
感谢!很受用
详细研读~很受用!
个人觉得,还是indexedDB 是标准,websql 不支持了,不敢用啊
websql存储的数据,要是进行app版本更新,会对以前存储的数据有影响吗?有没有成功案例
事实是相反的。
刚把存储方式从plus.storage切换到了localstorage,页面加载数据明显流畅了许多,现在有一个问题“怎么去检测某一个网页下localStorage的剩余容量?”
希望您能根据常用的进行详细的讲解
plus.storage、plus.io,针对性讲解下,谢谢
如果你要在android service 中使用数据库 怎么办
service 操作数据库你需要看一下native的内容
请问到底如何用才能使用sqlite数据库?
请问如何预置websql的数据库进行打包
使用HBuild做项目的时候,用到了websql就记录了下来,和大家分享。
《HTML5 Web SQL 的增删改查操作》
http://blog.csdn.net/zhuming3834/article/details/
sessionstorage 这个有大小限制吗 ? 读写是否有消耗?
这个就是浏览器里面的sessionstorage ,一般都是临时用,不会存大数据
http://ask./article/920
王者归来 之 终极解决方案
用 websql 模仿 localStorage 几乎无大小限制, 速度快过 plus.storage
配合 img base64 以及 websocket,可以秒现有其他方案
by liutao qq
我个人看法:(by刘涛 qq6-09-27)
localStorage 速度快,但容量小 2~5M,适合 跨页 参数传递,保留少量数据(文本和小图片) 等
localStorage 有个被人忽视的优良特性, 如果你的程序需要在不同页面访问同一个值(localStorage键值),需要了解这个值是否已经被其他页面改变,可向浏览器注册storage事件来实现
window.addEventListener('storage', function(e) {
console.log(e.key + &'s value is changed from '&+ e.oldValue + &' to '& + e.newValue + &' by & + e.url);
}, false);
localStorage['foo'] = 'bar';
localStorage['foo'] = 'newBar';
可以用来网页端实现 im , 推送 等等,好处大大的
indexedDB 代码开发上 比较反人类,关联查询 多条件查询 处理困难,需要绕道实现,妥妥的nosql范,在 某些浏览器上有容量限制,大多数不限制,我没具体测试过。
websql(sqlite) 就很友好了,w3c 从2010年就不维护它了,是因为它没啥好维护的,就是sqlite的嵌入而已。sqlite已经很成熟,你总不至于期望 一个嵌入数据库达到 oracle 的效能吧,不能把 夏利 当 法拉利 来开。我在浏览器客户端塞了上百兆的数据,没毛病。
base64 是个好东西,对象文本化,加密 妥妥的,不过大了三分之一的体积,毛毛雨了。
下面这个方法比较好,我觉得如果和我的(websql 模仿 localStorage 方案)配合,则堪称完美,且跨平台 不需要基座,存个几十兆没问题。
html5 在本地存储保存图片和文件
/articles/fiYJry
所以我的看法是: localStorage + websql + base64 + html5本地存储保存图片和文件 + mui(或5+) = 肖奈(前端之微微倾城)
要回复文章请先或[HTML5] 静态资源(JS/CSS)存储在localStorage | IT知识库
-& 正文阅读
[HTML5]静态资源(JS/CSS)存储在localStorage
静态资源(JS/CSS)存储在localStorage
一、简单了解SEOSEO由英文Search Engine Optimization缩写而来, 中文意译为&搜索引擎优化&。SEO是指从自然搜索结果获得网站流量的技术和过程。搜索引擎不优化的网站分为以下特征:1、网页中大量采用图片或者Flash等富媒体(Rich Media)形式,没有可以检索的文本信息,而SEO最基本的就是文章SEO和图片SEO;2、网页没有标题,或者标题中没有包含有效的关键词;3、网页正文中有效关键词比较少(最好自然而重点分布,不需要特别的堆砌关键词);4、网站导航系统让搜索引擎&看不懂&;5、大量动态网页影响搜索引擎检索;6、没有其他被搜索引擎已经收录的网站提供的链接;7、网站中充斥大量欺骗搜索引擎的垃圾信息,如&过渡页&、&桥页&、颜色与背景色相同的文字;8、网站中缺少原创的内容,完全照搬硬抄别人的内容等。内部优化,内容为王1、META标签优化:例如:TITLE,KEYWORDS,DESCRIPTION等的优化2、内部链接的优化,包括相关性链接(Tag标签),锚文本链接,各导航链接,及图片链接3、网站内容更新:每天保持站内的更新(主要是文章的更新等)外部优化,外链为皇1、外部链接类别:博客、论坛、B2B、新闻、分类信息、贴吧、知道、百科、相关信息网等尽量保持链接的多样性。2、外链运营:每天添加一定数量的外部链接,使关键词排名稳定提升。3、外链选择:与一些和你网站相关性比较高,整体质量比较好的网站交换友情链接,巩固稳定关键词排名&注&:div+css结构清晰,很容易被搜索引擎搜索到,适合seo优化,降低网页大小,让网页体积变得更小。如果要做SEO,那么CSS必然不能进行LS(localstorage)的本地缓存优化。原因很简单:要进行SEO,必须直接输出完整HTML,因此必须让样式在头部以link标签加载。如果先输出HTML,后用js从本地缓存读取样式再插入,在样式重置过程中会出现严重的阻塞和闪烁问题。二、浏览器缓存对于静态资源来说,浏览器不会缓存html页面的,所以你每次改完html的页面的时候,html都是改完立即生效的,不存在什么有缓存导致页面不对的问题。浏览器缓存的东西有图片、css和js。这些资源将在缓存失效前调用的时候调用浏览器的缓存内容。header中如果expires的时间为-1,那么缓存会立即失效。如果是一个将来时间,那么它将在将来时间失效header,Cache-Control: no-cache&header,这样浏览器就不会缓存静态资源了,每次取数据的时候都去服务器上重新获取。另外一种方式就是让你的静态资后缀加上一个版本号&link rel="stylesheet" type="text/css" href="../css/index.css?version="/&如果这个version有改变的话,下次就会重新获取这个静态资源。不设置这些参数,浏览器通过header中Last-Modified控制缓存失效 ,这个是由服务器自动加上的,如果有这个参数,那么浏览器每次都会重新计算本地的cache。如果浏览器返回一个304(自从上次请求后,请求的网页未修改过。服务器返回此响应时,不会返回网页内容),那么浏览器就可以使用本地的cache。三、LS使用PC上应用价值不大:兼容性不太好,不支持LS的浏览器比例仍然很大
网络速度快,协商缓存响应快,LS读取+eval很多时候会比不上304
通常需要SEO,导致css不能缓存,仅缓存js使得整个缓存方案意义进一步减小
浏览器本地缓存足够可靠持久
跨页面间共享缓存即便有浪费也差别不大
移动端webapp值得一试:兼容性好
网速慢,LS读取+eval大多数情况下快于304
webapp不需要seo,css也可以缓存,再通过js加载
浏览器缓存经常会被清理,LS被清理的几率低一些取出localstorage的代码不一定要eval,eval函数很有可能影响整个js文件的压缩(出现eval之后不能对变量名进行替换),可以通过一些hack避免这种压缩问题。
var script = document.createElement('script');
var code = '!function(){' + getCodeFromLocalStorage() + '\n}();';
script.appendChild(document.createTextNode(code));
document.head.appendChild(script);效率上应该跟eval差不多,真正的性能损耗还是在LS的读取上这是一种&黑科技&,因为LS本身并不是被设计用来干这件事的。从过往历史来看,任何黑科技都是短暂且不可靠的,但就在当下,我也想不到什么更好的工程手段来提升移动端webapp的性能,所以,LS+combo的方案可以说是&有总比没有强&。一旦有xss漏洞,就会被人利用将恶意代码注入到LS中,导致即便修复了xss恶意代码也存在的问题。LS问题还是有的。1、Safari 处于隐私模式时,LS set 数据会抛异常2、不同移动端浏览器,对单次set数据大小是有区别的,3-5M3、不同移动端浏览器对LS总容量大小是有区别的,5-10M四、增量加载&MT是手机腾讯网前端团队开发维护的一个专注于移动端的、带有增量更新特色的js模块管理框架在快速迭代版本过程中,我们有时候只修改了某个js中的几行代码,却需要用户下载整个js文件,这在重视流量的移动端显得非常浪费,mt独创的增强更新算法实现了修改多少代码就只下载修改代码的功能,为用户和公司节省大量流量//mtjs/mt
加: 16:43:39&
更: 16:43:41&
&&网站联系: qq: email:&html5本地存储 localStorage操作使用详解
作者:佚名
字体:[ ] 来源:互联网 时间:09-20 09:41:07
这篇文章主要介绍了html5本地存储 localStorage操作使用详解的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
1、html5几种存储形式
&& 本地存储(localStorage && sessionStorage)
&& 离线缓存(application cache)
&& indexedDB 和 webSQL
2、localStorage && sessionStorage
&& 过期时间:localStorage 永久存储,永不失效除非手动删除
&&&&&&&&&&&&&&&& sessionStorage 浏览器重新打开后就消失了
&& 大小:每个域名是5M
3、localStorage API和sessionStorage API一致
&& getItem //取记录&& setIten//设置记录&& removeItem//移除记录&& key//取key所对应的值&& clear//清除记录
4、存储的内容
&& 数组,图片,json,样式,脚本。。。(只要是能序列化成字符串的内容都可以存储)
5、localStorage实例
&!DOCTYPE& &&
&meta&http-equiv=&Content-Type&&content=&text/&charset=utf-8&&/& &&
&meta&http-equiv=&Access-Control-Allow-Origin&&content=&anonymous&& &&
&title&locstorage&图片存储&/title& &&
&/head& &&
&/body& &&
&/html& &&
&script& &&
&&&var&src='images/1.png';&&
&&&function&set(key){ &&
&&&var&img&=&document.createElement('img');&&
&&&img.addEventListener('load',function(){&&
&&&var&imgcavens&=&document.createElement('canvas'); &&
&&&imgcontent&=&imgcavens.getContext('2d'); &&
&&&imgcavens.width&=&this.&&
&&&imgcavens.height&=&this. &&
&&&imgcontent.drawImage(this,0,0,this.width,this.height); &&
&&&var&imgAsDataUrl&=&imgcavens.toDataURL('image/png');&&
&&&&&localStorage.setItem(key,imgAsDataUrl);&&
&&&}catch(e) &&
&&&&console.log(&storageFaild:&&+e);&&
&&&},false) &&
&&&img.src&=&&&
&&&function&get(key){ &&
&&&&var&srcStr&=&localStorage.getItem(key);&&
&&&&var&imgobj&=&document.createElement('img'); &&
&&&&imgobj.src&=&srcS&&
&&&&document.body.appendChild(imgobj);&&
&&&&/script&&&&
上述方法可以在火狐和chrome运行,运行例子如图:
&我们现在看下资源里面是如何存储的,如图:&
此时无论如何刷新页面和重新打开浏览器,刚才存储的图片都是存在的,除非手动删除!
6、locstorage 过期策略
由于html5没有给本地存储设置过期策略,那么在处理图片的过期策略的时候可以编写自己过期策略程序,如下:
&!DOCTYPE& &&
&meta&http-equiv=&Content-Type&&content=&text/&charset=utf-8&&/& &&
&meta&http-equiv=&Access-Control-Allow-Origin&&content=&anonymous&& &&
&title&locstorage&过期策略&/title& &&
&/head& &&
&/body& &&
&/html& &&
&script& &&
function&set(key,value){ &&
&var&curtime&=&new&Date().getTime();&&
&localStorage.setItem(key,JSON.stringify({val:value,time:curtime}));&&
&注意:单引号写在{}外,每个属性名都必须用双引号,否则会抛出异常。& JSON.stringify()用于从一个对象解析出字符串,如& var a = {a:1,b:2}& 结果:& JSON.stringify(a)& &{&a&:1,&b&:2}& */}
function&get(key,exp)&&
&&var&val&=&localStorage.getItem(key);&&
&&var&dataobj&=&JSON.parse(val);&&
if(new&Date().getTime()&-&dataobj.time&&&exp)&&
&&console.log(&expires&);&&
&&console.log(&val=&+dataobj.val); &&
&/script&&&&
使用操作如下图所示:
看下本地存储的结果
上述简单的例子可以操作html5本地存储的功能,感觉html5在本地存储方面还是很方便的!
大家感兴趣的内容
12345678910
最近更新的内容

我要回帖

更多关于 localstorage的优缺点 的文章

 

随机推荐