In: Computer Science
Exercise 1
(a) Use javascript modify the code below, so that in addition to outputting the selection to the web page, the selection is also placed in the browser’s local storage. Use ‘select’ as the local-storage key. The value will be the name of the category that was selected or the empty string is no selection was made.
(d) Add a button called ‘retrieve’. When it is clicked the local
storage is read and the prior selection is shown on the web
page.
Exercise 2
(a) Extend the code from Exercise 1. When the user clicks the retrieve button the radio buttons or tick boxes are also updated to show the prior selection. Confirm your code is working by making a selection, then exiting the browser, then restarting the browser at the same page and then clicking the retrieve button.
(b) Extend your web page so that the last 10 filter selections are
stored. The user is able to see these prior filter selections
(perhaps by clicking a button) and then choose one selecting it,
making that the current selection.
previous code:
<head> <body> <table> <tr> <tr> <td> <td> <tr> <td> <td> </tr> <tr> <td> <td> </table> <button onclick='print()'>Filter</button> <div style='margin-top:30px;' id='display'> </div> </body> <script> function print(){ var itemA= document.getElementsByName('ProductA'); var itemB= document.getElementsByName('ProductB'); var selectedItemA=''; for(var i=0; i<itemA.length; i++){
for(var i=0; i<itemC.length; i++){ var disp= document.getElementById('display'); newList=selectedItemA+selectedItemB+selectedItemC; if(newList==''){
function clearA(){ var itemA= document.getElementsByName('ProductA'); var itemB= document.getElementsByName('ProductB'); for(var i=0; i<itemA.length; i++){ itemA[i].checked=false; } for(var i=0; i<itemB.length; i++){ itemB[i].checked=false; } for(var i=0; i<itemC.length; i++){ itemC[i].checked=false; } var disp=document.getElementById('display'); disp.innerHTML=''; </script> |
||
Filter
Clear
Hi Madam/Sir,
I have solved part 1(a), 1(b) and 2(a) of the question. For 2(b), I need more clarification. As you have mentioned in 1(a) that the key name in localStorage should be 'select'. If we go by this convention then it is not possible to store and fetch previous ten selections from localStorage. This is because each time I save a value in localStorage, I am using the same key, i.e., 'select'. So every time the new value overrides the previous selection and there is no record of last selection.
To solve this issue, we have to use different key names (maybe sequential key names like select1, select2,.. and so on) but for that I will need to know whether that is okay with you.
Code for 1(a), 1(b) and 2(a) :
___________________________________
<head>
<title>
EX1
</title>
</head>
<body>
<table>
<tr>
<td>PET A</td>
<td>PET B</td>
<td>PET C</td>
</tr>
<tr>
<td>
<input type='checkbox' name='ProductA' value='Bird A1'>Bird A1
</td>
<td>
<input type='radio' name='ProductB' value='Cat B1'>Cat B1
</td>
<td>
<input type='checkbox' name='ProductC' value='Dog C1'>Dog C1
</td>
</tr>
<tr>
<td>
<input type='checkbox' name='ProductA' value='Bird A2'>Bird A2
</td>
<td>
<input type='radio' name='ProductB' value='Cat B2'>Cat B2
</td>
<td>
<input type='checkbox' name='ProductC' value='Dog C2'>Dog C2
</td>
</tr>
<tr>
<td>
<input type='checkbox' name='ProductA' value='Bird A3'>Bird A3
</td>
<td>
<input type='radio' name='ProductB' value='Cat B3'>Cat B3
</td>
<td>
<input type='checkbox' name='ProductC' value='Dog C3'>Dog C3
</td>
</tr>
</table>
<br />
<button onclick='print()'>Filter</button>
<button onclick='clearA()'>Clear</button>
<button onclick='onClickRetrieve()'>Retrieve</button>
<div style='margin-top:30px;' id='display'>
</div>
</body>
<script>
function print() {
var itemA = document.getElementsByName('ProductA');
var itemB = document.getElementsByName('ProductB');
var itemC = document.getElementsByName('ProductC');
var selectedItemA = '';
var selectedItemB = '';
var selectedItemC = '';
for (var i = 0; i < itemA.length; i++) {
if (itemA[i].type == 'checkbox' && itemA[i].checked == true)
selectedItemA += itemA[i].value + " ";
}
for (var i = 0; i < itemB.length; i++) {
if (itemB[i].type == 'radio' && itemB[i].checked == true)
selectedItemB += itemB[i].value + " ";
}
for (var i = 0; i < itemC.length; i++) {
if (itemC[i].type == 'checkbox' && itemC[i].checked == true)
selectedItemC += itemC[i].value + " ";
}
var disp = document.getElementById('display');
var newList = '';
newList = selectedItemA + selectedItemB + selectedItemC;
if (newList == '') {
disp.innerHTML = 'No Items selected';
localStorage.setItem('select', '');
} else {
disp.innerHTML = newList;
localStorage.setItem('select', newList);
}
}
function clearA() {
var itemA = document.getElementsByName('ProductA');
var itemB = document.getElementsByName('ProductB');
var itemC = document.getElementsByName('ProductC');
for (var i = 0; i < itemA.length; i++) {
itemA[i].checked = false;
}
for (var i = 0; i < itemB.length; i++) {
itemB[i].checked = false;
}
for (var i = 0; i < itemC.length; i++) {
itemC[i].checked = false;
}
var disp = document.getElementById('display');
disp.innerHTML = '';
}
function onClickRetrieve() {
var lastVal = localStorage.getItem('select');
document.getElementById('display').innerHTML = localStorage.getItem('select');
var els = document.getElementsByTagName('input');
for (i = 0; i < els.length; i++) {
if (lastVal.indexOf(els[i].value) != -1) {
els[i].checked = true;
} else {
els[i].checked = false;
}
}
}
</script>