1

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.?

Improve this question
6
  • 1
    Check if appchache can be of help. Refrence Link - html5rocks.com/en/tutorials/appcache/beginner Commented Jun 10, 2016 at 6:53
  • Try reading: programmers.stackexchange.com/questions/105524/… Commented Jun 10, 2016 at 6:56
  • @A.J I tried using appchache :<html manifest="example.appcache">. but this does not work, i don't know why. Commented Jun 10, 2016 at 6: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. Commented Jun 10, 2016 at 6: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 .? Commented Jun 10, 2016 at 7:03

3 Answers 3

Reset to default
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

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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

Improve this answer

Comments

0

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>);
  }
}
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.