Integrated Into A Project

Jan 30 2021- POSTED BY projecth 0 Comment

Solving It

Add items to local storage

searchForm.addEventListener('submit', () => {
  const searches = getRecentSearches();
  const searchString = searchBar.value;

  searches.push(searchString) 
  // Set local storage item
  localStorage.setItem('recentSearches', searches);
  createItem(searchString);
});

Remember, the value assigned to searches is an array, and local storage can only store string types. This presents a minor challenge. The way we will work around this is to store all of our data as stringified JSON, using the JSON.stringify() method: localStorage.setItem('recentSearches', JSON.stringify(searches));

Get local storage items

function getRecentSearches() {
  const searches = localStorage.getItem('recentSearches');
  if (searches) {
    return JSON.parse(searches);
  }
  return [];
}

Remove local storage items

clearButton.addEventListener('click', () => {
  localStorage.removeItem('recentSearches');
  recentSearchList.innerHTML = '';
});

Example Files

index.html

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Search Bar Demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/styles.css" />
  <link href='https://fonts.googleapis.com/css?family=Bitter:400,700' rel='stylesheet' type='text/css'>
</head>
<body>

  <div class="header">
    <h1 class="header-title">Search</h1>
    <form autocomplete="off" id="searchForm">
      <input class="text-input" type="text" id="searchBar">
      <button class="button" type="submit">Search</button>
    </form>
  </div>

  <div class="recent">
    <h2 class="recent-title">Recent Searches</h2>
    <button class="button" type="button" id="clearStorage">Clear Storage</button>
    <ul class="recent-list" id="recentSearchList"></ul>
  </div>

  <script src="app.js">
  </script>
</body>
</html>

app.js completed program

const searchForm = document.getElementById('searchForm');
const searchBar = document.getElementById('searchBar');
const clearButton = document.getElementById('clearStorage');

// Initialize display list
createStorageList();

// Retrieve searches from Local Storage, return an array
function getRecentSearches() {
  const searches = localStorage.getItem('recentSearches');
  if (searches) {
    return JSON.parse(searches);
  }
  return [];
}

// Create a list item
function createItem(item) {
  const recentSearchList = document.getElementById('recentSearchList');
  recentSearchList.insertAdjacentHTML('afterbegin', `<li>${item}</li>`);
}

// Create initial list from items in local storage 
function createStorageList() {
  const searchList = getRecentSearches();
  searchList.forEach(searchItem => {
   createItem(searchItem);
  });
}

// Set event handlers
searchForm.addEventListener('submit', () => {
  const searches = getRecentSearches();
  const searchString = searchBar.value;

  searches.push(searchString) 
  localStorage.setItem('recentSearches', JSON.stringify(searches));
  createItem(searchString);
});

clearButton.addEventListener('click', () => {
  localStorage.removeItem('recentSearches');
  recentSearchList.innerHTML = '';
});