I have an HTML form which takes three values from the user. When the user clicks add, the form should save the values in the local storage. Then, I need to be able to iterate over each value. The title field is unique and I want to use it as a key.
I spent some time in the mozilla’s examples but I did not find helpful examples when the key is input from the user.
I made some attempts but the values are not stored.
My question is What is wrong with this attempt to save each row in the storage? I need to save each row in the form as an object with the title is the key of that object or the object name.
Here is the manifest.json:
{
"manifest_version": 2,
"name": "testStorage",
"version": "1.0",
"description": "No description.",
"background": {
"scripts": ["main.js","storage.js"]
},
"applications": {
"gecko": {
"id": "addon@example.com"
}
},
"permissions": [
"<all_urls>",
"activeTab",
"tabs",
"storage"
],
"browser_action": {
"default_icon": {
"64": "icons/gray-64.png"
},
"default_title": "testStorage"
}
}
The html page index-page.html:
<html>
<head>
<meta charset="UTF-8">
</head>
<body id="body">
<table align="center" cellspacing=1 cellpadding=1 id="data-table" border=1>
<tr id="head" class="head">
<td class="head">Title</td> </div>
<td class="head">Letter</td>
<td class="head">Action</td>
</tr>
<tr id="initial-row" class="initial-row">
<td><input type="text" id="text-field"></td>
<td>
<select name="content-list" id="content-list">
<option value="A" id="option-1">A</option>
<option value="B" id="option-2">B</option>
<option value="C" id="option-3">C</option>
</select>
</td>
<td>
<input type="checkbox" id="saved" name="save-answer" value="saved"> Saved <br><br>
</td>
<td>
<input type="button" class="button" id="add-button" value="Add">
</td>
</tr>
</table>
<script src="index-script.js"></script>
</body>
</html>
The script index-script.js:
table = document.getElementById("data-table");
var addButton = document.getElementById("add-button");
var formTextArea = document.getElementById("text-field");
var checkBox = document.getElementById("saved"); //the checkBox
addButton.addEventListener('click', insertRow); //listener to click event on the add button
function onError(e) {
console.log(e);
}
function insertRow(event)
{
event.preventDefault();
var tableLength = table.rows.length;
//the three arguments I want to store
var title = formTextArea.value;
var content = document.getElementById("content-list").value;
var saved = checkBox.value;
formTextArea.value = '';
storeRow(formTextArea, content, tableLength); //store row in the storage
}//end insertRow
function storeRow(title, content, saved, index)
{
var storingRow = browser.storage.local.set({title:{contentValue:content,savedValue:saved}}); //not working
storingRow.then(displayRow(title, content, saved, index), onError);
}//end storeRow
function displayRow(title, content, saved, index)
{
var newRow = table.insertRow(index); //add new row to the HTML table
newRow.setAttribute("id","row-"+index);
var cell1 = newRow.insertCell(0); //add new column to the row.
cell1.setAttribute("id","col-1"+index);
var cell2 = newRow.insertCell(1);
cell2.setAttribute("id","col-2"+index);
cell2.setAttribute("className", "levels-list");
var cell3 = newRow.insertCell(2);
cell3.setAttribute("id","col-3"+index);
var cell4 = newRow.insertCell(3);
cell4.setAttribute("id","col-4"+index);
//show the entered values in the html
cell1.innerHTML = title;
cell2.innerHTML = content;
cell3.innerHTML = saved;
} //end insertRow