How to add an object to localStorage?

Ertan Özdemir — Mon, 04 Jul 2022 16:02:12 +0000

In this note I will show you how to insert an object to localStorage

In some situations you may want to store data in local storage or session storage as an object. So how can you achieve this?

Assume that we have an object and this object stores some tokens.



const tokens = {
token: "meowmeow",
anotherToken: "woofwoof"
}

Writing to localStorage

To set a localStorage item we have to use localStorage.setItem( ) method. This method takes two parameters, key and value. key is the name of our local storage item and the value is basically its value.

We cannot directly store objects in localStorage or session storage. Therefore we have to convert them into JSON string. To do that we have very handy method called JSON.stringify(value). value parameter is going to be object that we want to convert into JSON string. In this example value is tokens



JSON.stringify(tokens)

We learned how to convert object into JSON string. Now, let's add this JSON string to our localStorage



const tokens = {
token: "meowmeow",
anotherToken: "woofwoof"
}

localStorage.setItem("tokens", JSON.stringify(tokens))

If you check your local storage, you can see that your object has been successfully added.

Reading from localStorage

To read an object from localStorage, we have another handy method called JSON.parse( ). This method helps us to convert JSON string into JavaScript object. But first, we have to get the object from local storage.



const localStorageItem = localStorage.getItem("tokens")
const tokenObject  = JSON.parse(localStorageItem)


console.log(tokenObject)

/*
{
token: "meowmeow",
anotherToken: "woofwoof"
}
*/

Copying Items to Clipboard Without Using Clipboard API

Ertan Özdemir — Thu, 13 Jan 2022 08:49:03 +0000

There are several ways to use your clipboard. One of them is Clipboard API. This API is designed to supersede accessing the clipboard using document.execCommand() but if you have a web page that is served over HTTP, it probably won't copy anything to your clipboard. Because of security concerns, it works over HTTPS. In this blog post we will discuss how to achieve copying items without using Clipboard API.

Let's start

In this example we will use DOM operations and execCommand() method to create 'Copy to Clipboard' function. It shouldn't be forgotten that execCommand() method is deprecated and no longer recommended but some browsers still support it. Here the list of these browsers;

Our Code:



const handleCopy = (content) => {
  const textarea = document.createElement("textarea");
  textarea.textContent = content;
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand("copy");
  document.body.removeChild(textarea);
};

Firstly we define handleCopy function. It has parameter named content. The content parameter is the value we want to copy.

1- We create a new text area.



document.createElement("textarea")

2- And set it's textContent as the value we want to copy.



textarea.textContent = content;

3- Then we add our text area to body of DOM.



 document.body.appendChild(textarea);

4- Select all the text in textarea.



textarea.select();

5- We use execCommand("copy") for copying the content that we selected.



document.execCommand("copy");

6- Finally, we remove the textarea from DOM.



document.body.removeChild(textarea);

You did it! Now the content is on your clipboard 🎉🎉

Conclusion

In this post, I showed you how to copy texts to your clipboard. I hope it helps to you.