Introduction

Local data storage is used to store data permanently on a local drive. JavaScript localStorage object and its methods are used to implement local storage in JavaScript. The data is stored in a key/value pair. The localStorage object has the following methods,
  1. setItem() method adds key and value to localStorage
  2. getItem() method retrieves a value by the key from localStorage
  3. removeItem() method deletes an item by key from localStorage
  4. clear(): method deletes all data from localStorage
  5. key() method gets the key with its index.
The following code snippet reads data from a Web page text box controls and saves them and retrieves them from local storage. Code also removes items and uses other methods.
  1. <!DOCTYPE html>
  2. <html lang=”en”>
  3. <head>
  4. <meta charset=”UTF-8″>
  5. <title>Title</title>
  6. <script language=”JavaScript” type=”text/javascript”>
  7. function RememberCredentials(){
  8. localStorage.setItem(“Username”, document.getElementById(‘txtUsername’).value);
  9. localStorage.setItem(“Password”, document.getElementById(‘txtPassword’).value);
  10. }
  12. function LoadCredentials(){
  13. document.getElementById(‘txtUsername’).value = localStorage.getItem(“Username”);
  14. document.getElementById(‘txtPassword’).value = localStorage.getItem(“Password”);
  15. }
  17. function RemoveCredentials(){
  18. localStorage.removeItem(“Username”);
  19. localStorage.removeItem(“Password”);
  20. //localStorage.clear();
  21. }
  23. </script>
  24. </head>
  25. <body>
  26. <table style=”width:500px; height: 200px”>
  27. <tr>
  28. <td>Username</td>
  29. <td>
  30. <input type=”text” id=”txtUsername” />
  31. </td>
  32. </tr>
  33. <tr>
  34. <td>Password</td>
  35. <td>
  36. <input type=”password” id=”txtPassword” />
  37. </td>
  38. </tr>
  39. <tr>
  40. <td>
  41. <button onclick=”RememberCredentials()”>Remember Credentials</button>
  42. </td>
  43. <td>
  44. <button onclick=”RemoveCredentials()”>Clear</button>
  45. </td>
  46. </tr>
  47. </table>
  48. <script language=”JavaScript” type=”text/javascript”>
  49. LoadCredentials();
  50. </script>
  51. </body>
  52. </html>
Please leave us your comment below and share.