We Keep Coding

Auto Saving HTML form in Session Storage in AngularJS

I have an app which contains a HTML form, the form uses AngularJS meaning textfields use ng-model to save data into objects within the $scope.
Example:
In HTML:
<input type="text" ng-model="user.firstName">
In the controller:
$scope.user = {}
Now what I am trying to do is auto save user data as they type it within the session storage so if the page gets reloaded/refresh accidentally the data is still there and they don't have to type it all again.
I have tired this:
<textarea type="text" class="form-control" id="Background" name="Background" ng-model="obj.background" ng-change="autosave()" required></textarea>
In the above code I have ng-change function that runs when the state of the text field changes.
$scope.autosave = function(){
$window.sessionStorage.setItem("autosave", $scope.obj);
}
The above code outputs into this:
My Question:
How can I properly make this work so all fields in the form are autosaved and if the page accidentally refreshes the field are populated again with the data. This is the first time I am working with session storage so Im a little confused.
Whats the most efficient way of achieving this.

You could save it as JSON data instead of doing it directly as an object.
var obj = {};
obj.name = "dooley"
obj.last = "bonheuaa"
window.sessionStorage.setItem("me", JSON.stringify( obj));
After refreshing the page you can do the following to get it back
var me = JSON.parse( window.sessionStorage.getItem("me"))
now me will have the value of the object stored.

In SessionStorage (https://developer.mozilla.org/fr/docs/Web/API/Window/sessionStorage), you can only put String object.
So, i recommend you to use Stringify on get/set of the sessionStorage.
See this post for more information.

Fetch localStorage values to other page using id

I am storing the values in localStorage and the values are getting stored through input[type:hidden] and input[type:text].
JS:
$('.proceed_btn').on('click', function() {
// Blank to start with
var order = {};
// Loop through all inputs...
$('input[type="text"], input[type="hidden"]').each(function() {
// ...adding their values as properties
order[this.name] = this.value;
});
// Store that object in JSON format
localStorage.setItem("order", JSON.stringify(order));
});
I want to print these value in other page when the user redirects after submitting the form. I am working on ruby currently. There are many products in the website, so the information in the summary page gets rendered according to that. Is there any way to display specific form details in through there id's?

You can create a partial with .js.erb extension eg _order_partial.js.erb and retrieve the order object as thus:
order = JSON.parse(localStorage.getItem("order"));
// Loop through the object and print out
Then you can render the partial in any of the views file you want to use it.

Datatable client-side data change/redraw

I set up a datatables that initially gets from server some data and represents it, but then everything is left to the client. Some options are:
serverSide: false,
sAjaxSource: mySource,
My $.fn.DataTable.version is 1.10.2.
Then I need to change, client-side, the aaData under the table because some working on data is performed. I need to update the DT to show the client-altered temporary data without send another request to server (for two reason: prevent useless traffic and because that data is being altered).
I am looking for a way to edit the underlying DT databean to edit it, so then calling again
myTable.draw();
on my table I obtain a refresh realtime without sending another get to the server.
The question is, can I access DT data array, and can I edit it?
How is it done if is possible?
EDIT: I need to feed the table the full bean array as it initially took from the server, same format. So individual row/cell add/edit and client-side building functions are not suitable in my case, unless I manually cicle all objects.

SOLUTION
Use the code below:
// Retrieve data
var data = table.ajax.json();
// Modify data
$.each(data.data, function(){
this[0] = 'John Smith';
});
// Clear table
table.clear();
// Add updated data
table.rows.add(data.data);
// Redraw table
table.draw();
DEMO
See this jsFiddle for code and demonstration.

How to pass a variable to a new page and insert it to a textbox?

I am trying to transfer a variable from one page using this code:
Edit
to the page login.html, and insert the variable(asdf in this example) to a textbox in the new page.
I have tried this code:
function NameFunction(name) {
document.getElementById("username").value = name;
}
It is not working. I think it doesn't work because thats another page.

If you want to pass parameters to another page you can put them using query string:
Edit
To get parameter on the login.html page you can use jQuery as it described here: Get escaped URL parameter

you can try using localStorage.
In you're onClick method, save the data you want to store in localStorage
localStorage.setItem(key,value);
When the new page loads, in the onLoad (ready function if using jquery) method get the data from localStorage and set it in the textbox
you can find more about localStorage in the following links
Storing Objects in HTML5 localStorage
http://www.w3schools.com/html/html5_webstorage.asp
and many more are available online

Adding extra variables to a URL

Using JavaScript I managed to add a variable to a page and used $_GET on the new page to use the variable to perform queries. This first implementation worked fine as I was only using one variable. However I need to use two variables now and I'm running into some problems while doing it. If I combine both variables in the first page like shown below, the values are mixed up where my db value goes to my table id.
window.location.assign("test.php?db=&tbl=" + yourDB);
I tried putting both IDs only in my new page and using reload as my DB value would already have been passed. Using
window.location.reload("test.php?db=&tbl=" + yourTbl);
But this doesnt work either.
How can I get the url to have both my DB and table in the correct format? Like
test.php?db=test&tbl=customer
EDIT
yourDB variable is passed from a select form option from a different page which in turn opens the new page where the yourTbl variable exists.I can't therefore call yourDb

window.location = 'test.php?db=' + yourDB + '&tbl=' + yourTbl ;
'OP is asking: yourDB since this variable stores the values of select options from a different page.Any ideas'
My answer is 'Get value from selection menu list in the another page, and save this value into local storage or session storage.'
Something like this,
// save your db
window.sessionStorage.setItem("db", yourDB)
// get your db
var obj = window.sessionStorage.getItem("db");