local storage

last-endcode · last-endcode · commit 66f914154d69 · 2020-10-29T09:08:55.000+07:00
diff --git a/25_local_storage.js b/25_local_storage.js
@@ -0,0 +1,24 @@
+// web storage api = provided by browser
+//  session storage, local storage
+// setItem,getItem, removeItem, clear
+
+localStorage.setItem('name', 'John Doe');
+// will override be john doe
+localStorage.setItem('name', 'John Doe');
+// will override be peter doe
+localStorage.setItem('name', 'Peter Doe');
+
+// getItem
+// for getItem u should key not value
+const getPeter = localStorage.getItem('name');
+console.log(getPeter);
+
+// for removeItem
+localStorage.removeItem('name'); //remove name (peter doe)
+
+localStorage.setItem('name', 'kelly jane');
+localStorage.setItem('address', 'street heaven god');
+localStorage.setItem('telp', '+628 9999 797979');
+
+// and for whole remove storage use clear
+localStorage.clear(); //remove all key on storage
diff --git a/index.html b/index.html
@@ -16,6 +16,11 @@
         text-transform: uppercase;
       } */
 
+      .black {
+        color: #333;
+        font-weight: bold;
+      }
+
       .red {
         colors: white;
         background: red;
@@ -31,9 +36,19 @@
         text-transform: uppercase;
       }
 
-      a {
+      /* a {
         display: inline-block;
         margin-top: 100vh;
+      } */
+
+      .btn {
+        display: block;
+        color: white;
+        background: red;
+        padding: 15px;
+        text-transform: uppercase;
+        font-size: 1.5rem;
+        margin: 10px;
       }
     </style>
   </head>
@@ -155,10 +170,47 @@ <h3>The Pirates</h3>
     <!-- key events
     <input type="text" class="inputName" /> -->
 
-    <!-- even object -->
+    <!-- even object
     <button class="btn">click me</button>
     <h1>some heading</h1>
-    <a href="#" id="link">random link</a>
+    <a href="#" id="link">random link</a> -->
+
+    <!-- currentTarget vs target
+    <button class="btn">
+      first button
+      <h3>the heading</h3>
+    </button>
+    <button class="btn">
+      second <strong>button <strong>more nested</strong></strong>
+    </button>
+    <button class="btn">
+      third button
+      <p>lorem10</p>
+    </button> -->
+
+    <!-- event propogation_bubbling_capturing
+    <div class="container">
+      <ul class="list-items">
+        <li class="item"><a href="#" class="link">link</a></li>
+        <li class="item"><a href="#" class="link">link</a></li>
+        <li class="item"><a href="#" class="link">link</a></li>
+      </ul>
+    </div> -->
+
+    <!-- example
+    <div class="container">
+         </div>
+    <button class="btn">clicked</button> -->
+
+    <!-- forms event submit -->
+    <!-- <form action="" id="form">
+      <input type="text" id="name" />
+      <input type="password" id="password" />
+      <input type="submit" value="submit"></input>
+    </form> -->
+
+    <!-- localStorage -->
+    <h1>Local Storage</h1>
     <!-- source js -->
     <!-- <script src="/01_getElementById.js"></script> -->
     <!-- <script src="/02_getElementByTagName.js"></script> -->
@@ -179,6 +231,11 @@ <h1>some heading</h1>
     <!-- <script src="/17.addEventListener.js"></script> -->
     <!-- <script src="/18_function_reference.js"></script> -->
     <!-- <script src="/19_key_events.js"></script> -->
-    <script src="/20_event_object.js"></script>
+    <!-- <script src="/20_event_object.js"></script> -->
+    <!-- <script src="/21_currentTarget_target.js"></script> -->
+    <!-- <script src="/22_propogation_bubbling_capturing.js"></script> -->
+    <!-- <script src="/23_example.js"></script> -->
+    <!-- <script src="/24_forms_event_submit.js"></script> -->
+    <script src="/25_local_storage.js"></script>
   </body>
 </html>
