HTML5 localStorage: Big JSON, specific value as a condition for changing CSS (favorites list)

Question

Given the large JSON table in localStorage and the given key, how do I access the associated value and use it as a condition for CSS?

Given the following JSON:

var data = [ { 'myKey': 'A', 'status': 0 }, { 'myKey': 'B', 'status': 1 }, { 'myKey': 'C', 'status': 1 }, { 'myKey': 'D', 'status': 1 } ]; 

the following html style for styling:

 <p id="A">AA</p> <p id="B">BB</p> <p id="C">CC</p> <p id="D">DD</p> 

and the following css :

 .status1 { color: green; } .status0 { color: red; } 

This is one of the basic principles behind "click on your favorite / favorite list / favorite star."

Answer 1

Working example on violin, jQuery

0. Trick for Apps !: JSON and localStorage

 /* To store JSON in localStorage, you compress it as string */ localStorage["results"] = JSON.stringify(data); // or lS.restults /* Whenever you want to work on it, need to uncompress the JSON */ var data = JSON.parse(localStorage["results"]); 

1. Create meta functions: getJsonVal ()

 //META.Fn: pullVal function getJsonVal(json, itemId) { for (var i in json) { if (json[i].myKey == itemId) { return json[i]; } } } 

2. A function that checks the JSON value before introducing the CSS class accordingly

 //META.Fn: loadSwitch [check localStorage & set CSS function loadSwitchCSS($set, i) { setTimeout(function () { var myID = $set.eq(i).attr('id'); // a. Get key [my case: from the html ID] alert("look at:"+ myID); var val = getJsonVal(data, myID).status; // alert(data); if (val == 1) { // c. CSS remove-add: so if...else... CSS $set.eq(i).removeClass().addClass('status1'); } else { $set.eq(i).removeClass().addClass('status0') } if (i < $set.length - 1) { loadSwitchCSS($set, i + 1); } }, 100); } 

3. Fire function when loading:

 loadSwitchCSS($('p'), 0);