2 text fields and a button. One text field will take the name and the other a phone number.The button will save the entry into the localstorage as a json array.
how to do this in html5 ?
1
-
1Searching on Google and StackOverflow? stackoverflow.com/questions/2010892/… or stackoverflow.com/questions/3357553/…Getz– Getz2013-12-24 09:27:53 +00:00Commented Dec 24, 2013 at 9:27
Add a comment
|
5 Answers
Try this,
// Call this function on button Click
function saveDataInLS(){
var obj={};
obj.name=document.getElementById('name').value;
obj.phone=document.getElementById('phone').value;
var listObj=localStorage.getItem('DATA');
if(listObj!=null){
listObj=JSON.parse(listObj); //this will give array of object
listObj.push(obj);
}else{
listObj=[obj]; //first time
}
// Save Data in Local Storage
localStorage.setItem('DATA',JSON.stringify(listObj));
//Please check Local Storage which will be like
//[{"name":"Anand","phone":"6546456456"}{"name":"Andy","phone":"78688"}]
}
To get Data From Local Storage use,
var dataArr= localStorage.getItem('DATA');
dataArr=JSON.parse(dataArr);//this Will return An JS Array
dataArr[0]['name']//to get Name for first index(i==0)
dataArr[0]['phone']//get contact number for first index(i==0)
2 Comments
user3131979
the array is being overwritten...can u give me the code to display the items in the array as a list.
Anand Jha
I have updated the answer please check it. hope this will help you to solve your problem :-)
Try this
var urarr = { 'date': 1, 'phn_num': 2};
// Put the object into storage
localStorage.setItem('testObject', JSON.stringify(urarr));
// Retrieve the object from storage
var getObject = localStorage.getItem('urarr');
console.log('getObject: ', JSON.parse(getObject));
Comments
var texFieldName="abc"
var textFiledNumber="num"
var json={
"name":textFieldName,
"number":textFiledNumber
};
localStorage.setItem("data",json);
Comments
You should convert JSON to string and add event listener (with jQuery probably) on button click:
$('#button').click(function(e) {
var json = {};
json.tel = $('#tel').val();
json.name = $('#name').val();
localStorage.setItem('object', JSON.stringify(json));
});
// get Item
var jsonParse = JSON.parse(localStorage.getItem('object'));
Comments
$('#three').click(function () {
localStorage.data = JSON.stringify($('form').serializeArray());
console.log(localStorage.data);
});
<form>
<input type='text' name='one' id='one' />
<input type='text' name='two' id='two' />
<input type='submit' id='three' />
</form>
