Dealing with local memory for JavaScript browsers - ProgrammerTech
Language:

Search

Dealing with local memory for JavaScript browsers

  • Share this:
Dealing with local memory for JavaScript browsers

Dealing with local cache in javascript

local memory ( localStorage ) in browsers. The localStorage objects store data, this data is not deleted when the browser is closed, and this data is available for future sessions. localStorage has 3 main components:

  1. localStorage.setItem ("key",value);
  2. localStorage.getItem ("key");
  3. localStorage.removeItem ("key");

whereas:

  • The setItem element: We put a name for the key and after that we put a value for it and the key is a variable that means var.
  • The getItem element: enables us to get the value after we stored it in the first method and we specify the name of the variable that was saved in the local memory.
  • The removeItem element: its task is to delete data from the local memory, and to delete only the name of the key is needed.

 

Example 1

var age = 1990;
localStorage.setItem("Age", age);
alert(localStorage.getItem("Age"));

We store the value of 1990 in the variable named age and call the cache to save the key Age and its value is the value of the age variable. Then we asked to display it via alert and the command getItem ie to get the value stored in memory that holds the Age key.

1-46.webp

 

delete the stored data removeItem

We use the removeItem command to delete the data from localStorage and we need to delete this data only the key.

Example 2

var age = 1990;
localStorage.setItem("Age", age);
alert(localStorage.getItem("Age"));
localStorage.removeItem("Age");

We create a scalar variable named age and its value is 1990, and we set the name and value of this variable via setItem. Then we reviewed what was saved in the browser's local memory via alert, and it was the value of the variable. Then when we close the browser we delete what was saved in the previous session by removeItem.

Example 3

<h1 id="getName"><h1>
var setName = prompt("write your name");
document.getElementById("getName").innerHTML = "Hey, you :" + setName;

We have created the h1 tag in the body of the html page and set it id and hands is getName . And we created a variable named setName with the prompt element in order to create a dialog popup a text field that we can write in. And we reviewed the data via getElementById and typed the hands to be able to access it easily and we typed "welcome" in order to display it before the value entered in the field.

When I write in this space the name of Muhammad Alloush and we see what will happen.

We also noticed that the value we set in the Dialog popup becomes the value of the setName variable. But every time we refresh the page it will ask us for a value because we have not yet saved it to local memory.

 

Store the value in local memory

if (localStorage.getItem("Name")==null){
	var setName = prompt("write your name");
	localStorage.setItem("Name",setName);
}
document.getElementById("getName").innerHTML = "Hey, you :" + localStorage.getItem("Name");

In this way, the value will remain in the local memory even if the browser page is refreshed. And if we want to delete the stored data, we put a function and a button to delete.

<h1 id="getName"></h1> 
<button onclick="removeItem()">delete data</button>

In javascript it is

if (localStorage.getItem("Name")==null){
	var setName = prompt("write your name");
	localStorage.setItem("Name",setName);
}
function removeItem(){
	localStorage.removeItem("Name") ;
}
document.getElementById("getName").innerHTML = "Hey, you :" + localStorage.getItem("Name");

In this way, the data will remain stored in the memory, and when you press the delete button, it will delete the stored data and re-request new data when updating.


Tags:
Muhammad Alush

Muhammad Alush

إسمي محمد تركي العلوش من سورية من ريف حلب الشرقي 1994, محب للتقنية و التعلم الذاتي, و جميع خبراتي تعلمتها ذاتياً, و اللغات البرمجية التي أتقنها هي html, css, javascript, php, c, python بالإضافة إلى حبي الكبير لمجال الشبكات.

موقعي programmer-tech.com