Chrome extension:How to store data locally?

Question

I tried to do very basic to do list chrome extension. When i append the value from textarea, it is shown on extension but if i close the extension and then click it , appended value is not there. How can i store it?

// chrome.tabs.getSelected(null, function(tab){

$("#button").click(function() {
  var userList = $('#textarea').val();
  localStorage.setItem('userlist', 'userlist');
  $('#textarea').val('');
  $('#list').append('<p>' + localStorage.getItem('userlist', 'userlist'));
});

// });

#textarea {
  display: inline-block;
  min-width: 200px;
  resize: none;
  outline: none;
}
#button {
  border: none;
  color: #fff;
  background: #333;
  height: 24px;
  width: 50px;
  display: inline-block;
  vertical-align: 7px;
}
#list {
  border: 1px solid #333;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea rows="1" id="textarea"></textarea>
<button id="button">Add</button>
<div id="list"></div>

Answer 1

Yes. The answer is localStorage.

Basically you can use like this > localStorage.setItem('myCat', 'Tom');

Here below you can see how did i use it.

// just created  a list variable where i append my values.
// and then set the list to localStorage.
// then just wrote if statement to check if we have something on local storage already saved.

//all codes here

// chrome.tabs.getSelected(null, function(tab){

$("#button").click(function() {
  var userList = $('#textarea').val();
  $('#textarea').val('');
  $('#list').append('<p>' + userList);

  var list = $("#list").html();
  localStorage.setItem('list', list);
  return false;

});

if (localStorage.getItem('list')) {
  $('#list').html(localStorage.getItem('list'));
}

// });

#textarea {
  display: inline-block;
  min-width: 200px;
  resize: none;
  outline: none;
}
#button {
  border: none;
  color: #fff;
  background: #333;
  height: 24px;
  width: 50px;
  display: inline-block;
  vertical-align: 7px;
}
#list {
  border: 1px solid #333;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea rows="1" id="textarea"></textarea>
<button id="button">Add</button>
<div id="list"></div>

Answer 2

Have you tried localStorage?

localStorage.setItem('myCat', 'Tom');