JavaScript Local Storage : Create a simple tweet list app

Today we are going to create a simple web app using JavaScript Local Storage. In this, we will be able to create a list of tweets and save them using local storage. It will have a remove button and it can be retrieved even after refreshing the browser.

javascript local storage

HTML


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Save Tweets Into Storage</title>
<link rel="stylesheet" href="assets/css/normalize.css">
<link rel="stylesheet" href="assets/css/skeleton.css">
<link rel="stylesheet" href="assets/css/custom.css">
</head>
<body>

<div id="content">
<div class="container">
<h1>Local Storage</h1>
<div class="row">
<div class="six columns">
<label for="tweet">Tweet:</label>
<form action="#" id="form">
<label for="tweet"></label>
<textarea id="tweet" class="u-full-width"></textarea>
<input type="submit" class="button u-full-width button-primary" value="Save Tweet">
</form>
</div> <!--.six-->
<div class="six columns">
<h2>My Tweets</h2>
<div id="tweet-list"></div>
</div> <!--.six-->
</div>
</div>
</div> <!--#contenido-->

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

JS CODE – JavaScript Local Storage Web App


// variables
const tweetlist = document.getElementById('tweet-list');

// Event Listeners
eventListeners();

function eventListeners() {
// Form Submission
document.querySelector('#form').addEventListener('submit', newTweet);

// Remove tweet from list

tweetlist.addEventListener('click', removeTweet);

// document
document.addEventListener('DOMContentLoaded', localStorageOnLoad);

}

// Functions

function newTweet(e) {
e.preventDefault();

console.log("Form Submitted");

// Read the textarea value

const tweet = document.getElementById('tweet').value;

// Create remove Button
const removeBtn = document.createElement('a');
removeBtn.classList = 'remove-tweet';
removeBtn.textContent = 'X';

// Create an <li> element

const li = document.createElement('li');
li.textContent = tweet;

// Add remove button to ech tweet
li.appendChild(removeBtn);

//Add to list
tweetlist.appendChild(li);

// add to local storage
addTweetLocalStorage(tweet);

// Print an alert
alert('Tweet Added');

this.reset();

}

// Removes tweet from DOM

function removeTweet(e){
if(e.target.classList.contains('remove-tweet')) {
e.target.parentElement.remove();
}

// Remove from storage
removeTweetLocalStorage(e.target.parentElement.textContent);

}

// Add tweet to local storage

function addTweetLocalStorage(tweet){
let tweets = getTweetsFromStorage();

// Add the tweet into array
tweets.push(tweet);

// convert tweet array into string
localStorage.setItem('tweets', JSON.stringify(tweets));

}

function getTweetsFromStorage(){
let tweets;
const tweetsLS = localStorage.getItem('tweets');
// Get the values, if null is returned then we create empty array

if(tweetsLS === null) {
tweets = [];
} else {
tweets = JSON.parse(tweetsLS);
}
return tweets;
}

// Prints local storage tweet on load
function localStorageOnLoad(){
let tweets = getTweetsFromStorage();

//loop through storage and print values

tweets.forEach(function(tweet) {
// Create remove Button
const removeBtn = document.createElement('a');
removeBtn.classList = 'remove-tweet';
removeBtn.textContent = 'X';

// Create an <li> element

const li = document.createElement('li');
li.textContent = tweet;

// Add remove button to ech tweet
li.appendChild(removeBtn);

//Add to list
tweetlist.appendChild(li);
});
}

// Removes tweet from local storage
function removeTweetLocalStorage(tweet){

// get tweets from storage
let tweets = getTweetsFromStorage();

// remove x from tweets
const tweetDelete = tweet.substring(0, tweet.length-1);

// Loop through the tweets and remove the tweets thats equal
tweets.forEach(function(tweetLS, index){
if (tweetDelete === tweetLS){
tweets.splice(index, 1);
}
});

// save the data
localStorage.setItem('tweets', JSON.stringify(tweets));

}

In this, we are saving the data using javascript local storage as an array and retrieving back even when the page is refreshed.  After saving the tweet, each new tweet is added into an array which is saved for later access. On clicking delete, each item is matched with the item saved on local storage and then removed.

You can download the complete code from here.

Leave a Reply