HTML DOM Local Storage clear() method

HTML Web Development Front End Technology

The HTML DOM Local Storage clear() method is used for clearing the whole local storage entries.

Syntax

Following is the syntax −

localStorage.clear()

sessionStorage.clear()

Example

Let us see an example for LocalStorage() method property −

Live Demo

<!DOCTYPE html>
<html>
<head>
<title>LocalStorage clear()</title>
<style>
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   * {
      padding: 2px;
      margin:5px;
   }
   input[type="button"] {
      border-radius: 10px;
   }
   table,th,td {
      border:1px solid black;
      border-collapse: collapse;
      margin: 0 auto;
   }
</style>
</head>
<body>
<form>
<fieldset>
<legend>LocalStorage clear( )</legend>
<table>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
<tr>
<td>PassKey</td>
<td>ja12ertplo</td>
</tr>
</table>
<input type="button" value="Store Key" onclick="storeData()">
<input type="button" value="Delete Key" onclick="clearData()">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var extStyle = document.getElementById("extStyle");
   function clearData(){
      localStorage.clear();
      divDisplay.textContent = 'Succesfully Deleted';
   }
   function storeData(){
      localStorage.setItem('PassKey','ja12ertplo');
      divDisplay.textContent = 'Succesfully Stored';
   }
</script>
</body>
</html>