How to store javascript or a css file in localStorage

Question

How to store a specific JavaScript or a CSS file in local storage of browser programmatically, retrieve it whenever needed and delete it from the local storage if the current session expires.

Let's understand through this example (pseudo-code):

var load_from_server = true;
if (detect local storage)  
{
  if (cache of css, js found)
  {
     load the css and js from local storage cache
     load_from_server = false;
  }
}
if (load_from_server)
{
   document.write('<script>...');
}

$( window ).unload(function() {
  clear local storage cache
});

I need something like this. I referred plenty of blogs and QA's of stack overflow, but didn't got but didn't what exactly i am looking for. Please suggest How can i do this.?

Check if `appchache` can be of help. Refrence Link - http://www.html5rocks.com/en/tutorials/appcache/beginner/ — Ajay Narain Mathur, Jun 10 '16 at 06:53
Try reading: http://programmers.stackexchange.com/questions/105524/is-it-realistic-to-make-use-of-html5-local-storage-to-store-css-and-javascript — Kiksen, Jun 10 '16 at 06:56
@A.J I tried using appchache :. but this does not work, i don't know why. — , Jun 10 '16 at 06:56
As to deleting the assets from local storage if the session expires, you could use session storage. It removes storage when the browser closes automatically. — neallred, Jun 10 '16 at 06:57
@neallred How can i use use session storage.? Do you have any code snippet.? or have you came across any article which have code snippet for the same .? — , Jun 10 '16 at 07:03
Here's a brief example with sessionStorage: `sessionStorage.setItem('nextRecipeId', 'recipe_'+prefix+(parseInt(nextRecipeId)+1) )}`. To learn more, you can try this: http://www.w3schools.com/html/html5_webstorage.asp. To learn even more, you can try this: https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage. Like @rahlrokks and @Kiksen say though, using web storage to store files is not the best way to do it. — neallred, Jun 12 '16 at 00:48

score 0 · Answer 1 · edited May 23 '17 at 12:10

0

You can't store file in localstorage. But you can use html5 menifest to store html, css, js and image.

Check this other thread for more details.

Storing CSS and JS in Local Storage

edited May 23 '17 at 12:10

Community

1
1

answered Jun 10 '16 at 06:56

rahlrokks

451
1
4
12

score 0 · Answer 2 · edited Apr 12 '17 at 07:31

0

In short yes, but i wouldn't recommend you do so. Try reading this, it's the same as your question: https://softwareengineering.stackexchange.com/questions/105524/is-it-realistic-to-make-use-of-html5-local-storage-to-store-css-and-javascript

edited Apr 12 '17 at 07:31

Community

1
1

answered Jun 10 '16 at 06:56

Kiksen

1,559
1
18
41

score 0 · Answer 3 · answered Oct 28 '16 at 09:00

Well, this worked for me. If you also store a variable with the last change date in the localstorage and pass another one to your script you won't have to clear the storage when the page is left. You can compare the two dates and only load the newer script from server if necessary. It would increase the performance if the user comes back to the page, especially when having a slow connection.

Load the script from server:

jQuery.loadScript(<your_script_url>);
jQuery.loadScript = function (url) {    
    jQuery.ajax({
        url: url,
        dataType: 'script',
        cache: false,   
        async: true,
        success: function(response){            
            save_script_in_local_storage(response);         
        }
    });
}

Save it in local storage:

function save_script_in_local_storage(script){
    try{
        if (typeof(Storage) !== "undefined" && typeof localStorage !== "undefined" && localStorage !== null && typeof localStorage.setItem === 'function') {
localStorage.setItem("my_script", JSON.stringify(script));
}
    }catch(e){
        console.log(e);
    }
}

Load Script from local storage:

if (!load_from_server){
   try{
        if (typeof(Storage) !== "undefined" && typeof localStorage !== "undefined" && localStorage !== null && localStorage.getItem("my_script") !== null) {
           var my_script = JSON.parse(localStorage.getItem('my_script'));
           $('<script>')
                .attr('type', 'text/javascript')
                .attr('id', 'my_script')
                .text(my_script)
                .appendTo('head');
        }else{                  
           jQuery.loadScript(<your_script_url>);
        }
  }catch(e){
     jQuery.loadScript(<your_script_url>);
  }
}

How to store javascript or a css file in localStorage

3 Answers3