CODEWITHSUNDEEP
javascripthtmlckeditor
Ben
Ben

Reputation: 687

How to store text content of a browser textarea on a local disk

I need to store edited "textarea" text ( > 1 MB ) temporarily on a local disk to work offline. Later I want to load it again and continue editing, just like a with common desktop apps.
I know I can load textfiles easily and add it to an textarea. But how to save it ? I'v red a lot in blogs about this issue and there are some serious workaround proposals like IndexdDB and Web SQL Storage. But which one is working on all major browsers and will be supported in the (near) future ? I did not find any current clear statement yet.

Upvotes: 1

Views: 538

Answers (1)

GitaarLAB
GitaarLAB

Reputation: 14645

You are looking for the host's (window) Storage object, specifically the localStorage variant (since the sessionStorage variant is only retained -you might have guessed it- during a session).
It is supported by all modern browsers (by the specifications) and will usually hold 5 MB.

You could try the following example in w3schools editor (because it will not work on stack-snippets, jsfiddle, realtime-html-editor etc. due to security reasons).
Also note that it will not work in locally saved web-pages, as currently browsers still need a fully qualified domain-name in order to apply security-measures and link storage (also cookies etc.) to the proper domain!
That's why I mentioned the dreaded w3schools (as I couldn't find something where this would work without having webhosting up and running).
Finally, above 'justification' is also intended to explain why examples you might have tried locally didn't work.
A final work-around is setting up a local webserver and point your browser to the (local) IP-address, thereby solving the 'problem' where browsers need a valid domain to link the storage to!!!
(I'm very fond of tiny for quick and portable local fiddeling around with such code that requires a valid URL.)

Here is the mentioned (tested) code to get you started: (comments should explain it)

<form>
  <textarea id="save_my_txt" placeholder="Enter text here.."></textarea>
  <input type="reset" value="reset">
</form>

<script>
(function(elm, key){
  // check for local storage support
  if(window.localStorage){
    // if there was data stored, retrieve it and output it to the elment
    if(localStorage.getItem(key)) elm.value=localStorage.getItem(key);
    // when the element is blurred and the content is changed
    elm.onchange=function(){
      // check if the textarea is empty and save or remove localStorage entry
      localStorage[this.value?'setItem':'removeItem'](key, this.value);
    };
    // finally, a form's reset does NOT fire it's element's onchange()
    // either 'fix' the reset-button (using `this.form.reset()`)
    // or the form's `onreset` handler (example below:)
    elm.form.onreset=function(){ localStorage.removeItem(key); };
  } // else handle the lack of Storage-support differently..
}( document.getElementById('save_my_txt')  // pass in a textarea
 , 'my_txt_str'                            // pass key-identifier for localStorage
 )
); //end IIFE
</script>

Note that since you already requested modern/future browser support, I used the html5 placeholder (alleviating some javascript required to correctly manipulate defaultValue for resets etc).

Hope this helps!!

Upvotes: 2

Related Questions