admin管理员组文章数量:1410682
I have been trying to use localstorage to store Jquery-min but I am unable to do it. I have tried some of the Jquery plugins and they do not work either.
It just seems like a great idea to load Jquery once for my web application and never worry about it again. The application that I am creating has people that visit everyday. I do not think it is needed for them to download the JS files or CSS files more than once.
I am able to store all CSS in localstorage, but not Jquery or Jquery UI.
Anyway, I know people are going to try and convence me to use cache manifest....etc. But I am looking for a way to store the Jquery library in localstorage. (That is the goal).
Any ideas?
EDIT: Everyone was asking for a code example. So here it is....it is pretty straight forward, i am only using a small--small amount of the Jquery minified version in order to keep the post small:
localStorage.setItem("name", "(function(a,b){function cy(a){return f.isWindow(a)?a:a.nodeType===9?a.defaultView||a.parentWindow:!1}function cv(a){if(!cj[a]){var b=f('<'+a+'>').appendTo('body'),d=b.css('display');b.remove();if(d==='none'||d===''){ck||(ck=c.createElement('iframe'),ck.frameBorder=ck.width=ck.height=0),c.body.appendChild(ck);if(!cl||!ck.createElement)cl=(ck.contentWindow||ck.contentDocument).document,cl.write('<!doctype><html><body></body>");
What is saved when viewing it:
(function(a,b){function cy(a){return f.isWindow(a)?a:a.nodeType===9?a.defaultView||a.parentWindow:!1}function cv(a){if(!cj[a]){var b=f('<'+a+'>').appendTo('body'),d=b.css('display');b.remove();if(d==='none'||d===''){ck||(ck=c.createElement('iframe'),ck.frameBorder=ck.width=ck.height=0),c.body.appendChild(ck);if(!cl||!ck.createElement)cl=(ck.contentWindow||ck.contentDocument).document,cl.write('
It does not save everything. Can I use a parsefloat() or something? How would I do that if it would work?
The reason I like local storage is that I can control it easy. And I don't have to worry about users emptying their cache. If I need to update localstorage I can do it with one line of code. It almost acts as an update feature for my web application. Please let me know if I am missing something or if there is an easier way to do this. Sample code ing soon
I have been trying to use localstorage to store Jquery-min but I am unable to do it. I have tried some of the Jquery plugins and they do not work either.
It just seems like a great idea to load Jquery once for my web application and never worry about it again. The application that I am creating has people that visit everyday. I do not think it is needed for them to download the JS files or CSS files more than once.
I am able to store all CSS in localstorage, but not Jquery or Jquery UI.
Anyway, I know people are going to try and convence me to use cache manifest....etc. But I am looking for a way to store the Jquery library in localstorage. (That is the goal).
Any ideas?
EDIT: Everyone was asking for a code example. So here it is....it is pretty straight forward, i am only using a small--small amount of the Jquery minified version in order to keep the post small:
localStorage.setItem("name", "(function(a,b){function cy(a){return f.isWindow(a)?a:a.nodeType===9?a.defaultView||a.parentWindow:!1}function cv(a){if(!cj[a]){var b=f('<'+a+'>').appendTo('body'),d=b.css('display');b.remove();if(d==='none'||d===''){ck||(ck=c.createElement('iframe'),ck.frameBorder=ck.width=ck.height=0),c.body.appendChild(ck);if(!cl||!ck.createElement)cl=(ck.contentWindow||ck.contentDocument).document,cl.write('<!doctype><html><body></body>");
What is saved when viewing it:
(function(a,b){function cy(a){return f.isWindow(a)?a:a.nodeType===9?a.defaultView||a.parentWindow:!1}function cv(a){if(!cj[a]){var b=f('<'+a+'>').appendTo('body'),d=b.css('display');b.remove();if(d==='none'||d===''){ck||(ck=c.createElement('iframe'),ck.frameBorder=ck.width=ck.height=0),c.body.appendChild(ck);if(!cl||!ck.createElement)cl=(ck.contentWindow||ck.contentDocument).document,cl.write('
It does not save everything. Can I use a parsefloat() or something? How would I do that if it would work?
The reason I like local storage is that I can control it easy. And I don't have to worry about users emptying their cache. If I need to update localstorage I can do it with one line of code. It almost acts as an update feature for my web application. Please let me know if I am missing something or if there is an easier way to do this. Sample code ing soon
Share edited Dec 6, 2011 at 9:20 ThinkingStiff 65.4k30 gold badges147 silver badges241 bronze badges asked Jun 30, 2011 at 14:18 mitchmitch 1555 silver badges13 bronze badges 11- 1 Are you getting a particular error? Tell us more about what you mean by "not able to." – glortho Commented Jun 30, 2011 at 14:21
-
14
Don't store your CSS or JS in localstorage. This isn't what it's designed for. Set appropriate
Expiresheaders, and let the browser handle the caching. I know you said you expected this, but really, it's not worth your time to try to do this yourself when browsers are designed to handle exactly this problem. Just set the expiry date to a year in the future, and you're done. – Michael Mior Commented Jun 30, 2011 at 14:28 - 1 Second the Expires header, maybe even use a free CDN like google - code.google./apis/libraries/devguide.html#jquery – Kevin Hakanson Commented Jun 30, 2011 at 14:55
- The error I think I am getting is that localstorage requires a string. And the jquery libraries are not strings. There must be a way to resolve this. – mitch Commented Jun 30, 2011 at 15:04
- I have to agree with @Michael Mior; perhaps it would help if you could clarify with a use case? – psema4 Commented Jun 30, 2011 at 15:34
3 Answers
Reset to default 3It works fine if you Base64 encode your script file before saving it to localstorage. In the sample below I left out the jQuery file, but in the demo the whole jQuery 1.7 is encoded.
I used the following site to encode the whole file as one string (most break it into chunks): http://textmechanic.co/ASCII-Hex-Unicode-Base64-Converter.html?type=text
Demo: http://jsfiddle/ThinkingStiff/ZMAKn
HTML:
<div></div>
Script:
var jquery = '<Base64 encoded file>';
var result = 'jQuery: ' + ( typeof $ != 'undefined' ) + '<br />';
window.localStorage.setItem( 'jquery', jquery );
jquery = '';
jquery = window.localStorage.getItem( 'jquery' );
eval( atob( jquery ) );
result += 'jQuery: ' + ( typeof $ != 'undefined' ) + '<br />';
$( 'div' ).html( result ); //this works, so jQuery loaded
window.localStorage.removeItem( 'jquery' );
Output:
jQuery: false
jQuery: true
This was a great exercise and all for HTML5 local storage, but shouldn't your web server just respond with an HTTP 304 (Not Modified)? Just about all web servers since 1998 support this feature. It would be much faster to have your server respond with a simple 304 than to write gobs of javascript to load jQuery in and out of local storage.
And if for some reason you can't get your web server to work, use one of the public jQuery CDNs where they will do this for you.
I agree with Cyan Lite. You need to use browser caching for this, not waste time encoding it.
If you don't want to use a CDN as Cyan suggested, you can easily enable caching on your server: https://developers.google./speed/docs/best-practices/caching#LeverageBrowserCaching
本文标签： javascriptCache entire jqueryminjs file in HTML5 localstorageStack Overflow
版权声明：本文标题：javascript - Cache entire jquery.min.js file in HTML5 localstorage - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744948451a2633929.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论