Storing CSS and JS in Local Storage

My webapp is primarily used on mobiles so I'm looking to store static CSS and JS files to reduce the loading time. Its a trick even Google and Bing seems to use I read somewhere.

Although I understand getting and setting values is easy:

// Put the object into storage
localStorage.setItem('testObject', JSON.stringify(testObject));

// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');

... but I'm not sure how I could set, get and render/execute CSS stylesheets and Javascript files. Any example would help.

标签： javascript html css local-storage

3条回答

神经病院院长

2楼-- · 2019-04-29 10:25

In your example it should be var retrievedObject = JSON.parse(localStorage.getItem('testObject'));. As localStorage can only handle string value pairs by now, it would be worth a try to make up a new Object like this:

{type: "css", blob: "<serverside rendered>", deferred: false}

Here is an example:

var resources = [
  {type: "css", blob: ".unknown { color: red; } div { margin: 20px; }", deferred: false}
]

function appendResources(){
  var head =  document.getElementsByTagName("head")[0];
  for(var resourceIndex in resources){
    var resource = resources[resourceIndex]
    if(resource.type == "css"){
      /* https://stackoverflow.com/a/6211716/3244925 */
      var element = document.createElement("style");
      element.type = "text/css";
      element.appendChild(document.createTextNode(resource.blob));
      head.appendChild(element)
    }
  }
}

document.getElementsByTagName("button")[0].addEventListener("click", appendResources);

<div class="unknown">Defaultly, i have no style.</div>
<button>Add style from localStorage</button>

You can fill an array of object like these by your server side implementation and append them to the dom later on. This example only handles CSS and makes no difference for deffered items, as it appends everything to the <head>, but you get the idea.

I copied the interesting part of this answer: https://stackoverflow.com/a/6211716/3244925

These objects can be saved in the localStorage using: localStorage.setItem('resources', JSON.stringify(resources)); and later on be re used.

Update

I feel the answer to your question may be much simpler. If your .css and .js files are static, you may just make up an array of external resources (urls) and append those urls to the <head> and <body> later on, once you loaded them from the localStorage. This will render this inline styles and javascript useless, and it would be a much cleaner solution.

0人赞添加讨论(0) 举报

劫难

3楼-- · 2019-04-29 10:38

maybe you are looking for appCache which download the source of your files once and checks only if appcache file is modified to update your source.

This is really simple to implement.

update your html

<html manifest="myfile.appcache">

Create your appcache file: myfile.appcache in your project root folder

CACHE MANIFEST
# LIST ALL YOUR FILES 

NETWORK: 
*

See official doc for more info : http://www.w3schools.com/html/html5_app_cache.asp

Good explanation from html5rocks : http://www.html5rocks.com/en/tutorials/appcache/beginner/

0人赞添加讨论(0) 举报

爷的心禁止访问

4楼-- · 2019-04-29 10:46

Once you load a webpage for the first time, browser stores all its major content in the cache. So, since this caching process is not biased you can not make any content stable under browser cache.

HTML5 has a utility called local storage. It is used to save data like cookies and text under a special storage provided by the browser & cache does not have any relation with it.

However, you can store the css in the string format inside localstorage but not the css file.

0人赞添加讨论(0) 举报

Storing CSS and JS in Local Storage

Update

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间