write data to local browser storage in angularjs

Question

I am developing the front end of an application in AngularJS. Input is given in a search box, on clicking the search button, I have to save the data in a text file. (The input will be a string). How do I do this?

Also, after this operation, I have to view the output stored in a text file in the html. How do I do this?

Answer 1

Quite often the saved data is not for the end user but the app.

A text file seems often as a simple and quick way (which is kind of isn't when we talk about web apps and client side access).

At this link, Client-Side Storage, you find a few "local storage solution" and their pros/cons, which you can compare with server based databases, to find the best way for your app.

And as its title says, the benefit of client side storage is access to it without internet connection.

Answer 2

You can use the full power of the File System API only if you can get the user to select the file you need to write to. You can use cookies in your code if that is not your case.

The saveData function can save whatever the string you need in a cookie. The file will be there even after you close the browser (set for 30 days in my example).

The loadData function returns the data you saved in a previous session.

Use $cookies provider in Angular if you use it. It sums the things up in a nicer way.

You will see that cookies can do much more things including saving multiple data sets in multiple files if you explore bit more by googling about it.

function saveData(searchQuery) {

    var d = new Date();
    d.setTime(d.getTime() + (30*24*60*60*1000));
    var expires = "expires="+d.toUTCString();

    document.cookie = "mySearch=" + searchQuery + "; expires=" + expires;

};

   function loadData() {
       return document.cookie;
   }