localStorage: condition to prevent storing duplicated values in localStorage

Question

When clicking a li element, I want to store its text as a localStorage value only once. If it exists in localStorage, a second click must have no effect (just an alert).

To check if the string exists I'm doing an if inside a for loop, but I'm doing something wrong. (fiddle line 26). My question is if there is a way to make this condition work.

I can not use the colors as keys, since my real script uses large strings instead of colors. Adding a class is not the way I want to solve it.

Thanks

http://jsfiddle.net/SXjtd/3/

// Each color must be stored with localStorage once with a click.
// The second click must have no effect, just run an alert.
// LINE 26: the problem is while checking if the value exists
// Colors are used for this example, the real js uses long strings, that's why I can not use the colors as keys.

localStorage.clear();

// define a value that will be used for increment
if (localStorage.getItem('current_id') === null) {
   localStorage.setItem('current_id', 0);
} 

$(document).on('click', 'li', function() {
  var dl = $('dl');
  var current_color = $(this).text();

   // each click generates a new key
   current_key = 'color_id_' + (parseInt(localStorage.getItem('current_id')) + 1);
  localStorage.setItem('current_id', (parseInt(localStorage.getItem('current_id')) + 1));

    $('<dt>' + current_key + '</dt><dd>' + current_color + '</dd>').appendTo(dl);

  // THE PROBLEM IS HERE
  // I want to know how to check if a value exists in localStorage
  // if this value doesn't exist, it is set in localStorage with a click
   for (var i = 0, len = localStorage.length; i < len; i++) {
    if (localStorage.getItem('color_id_' + i) == current_color) {
      alert('Color exists in localStorage.');
    } else {
      alert('New Color added to localStorage');
      localStorage.setItem(current_id, current_color);
    }
  }   


});

Answer 1

I think this solution can help to you:

$(document).on('click', 'li', function() {
    var color = $(this).text();

    if(!localStorage.getItem("colors")){
        localStorage.setItem("colors", "[]");
    }
    var list = JSON.parse(localStorage.getItem("colors"));
    var exist = false;
    for(var i = 0; i < list.length; i++)
        if(list[i] == color) {
            exist = true;
            break;
        }
    if(!exist) list.push(color);
    else{
        alert("EXIST");
    }

    localStorage.setItem("colors", JSON.stringify(list));     
});

Working demo.

The idea is storing selected colors in array, then save to localStorage. If user clicks to color we just get data serialize it and then check for existing.

1. Get data serialize it
2. Check if color exist
3. Save if not exist, otherwise show alert
4. Deserialize data and store

Another way:

$(document).on('click', 'li', function() {
    var color = $(this).text();
    var nSpace = "colors." + color;
    if(localStorage.getItem(nSpace))
        alert("EXIST");
    else
        localStorage.setItem(nSpace, true);
});

Idea is using namespaces.

Answer 2

Why don't you just use the string you're storing as the key of the localStorage entry?