10000 local storage · last-endcode/JavaScript-DOM@66f9141 · GitHub
[go: up one dir, main page]
Skip to content

Commit 66f9141

Browse files
last-endcodelast-endcode
committed
local storage
1 parent 5038db3 commit 66f9141

File tree

2 files changed

+85
-4
lines changed

2 files changed

+85
-4
lines changed

‎25_local_storage.js

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
// web storage api = provided by browser
2+
// session storage, local storage
3+
// setItem,getItem, removeItem, clear
4+
5+
localStorage.setItem('name', 'John Doe');
6+
// will override be john doe
7+
localStorage.setItem('name', 'John Doe');
8+
// will override be peter doe
9+
localStorage.setItem('name', 'Peter Doe');
10+
11+
// getItem
12+
// for getItem u should key not value
13+
const getPeter = localStorage.getItem('name');
14+
console.log(getPeter);
15+
16+
// for removeItem
17+
localStorage.removeItem('name'); //remove name (peter doe)
18+
19+
localStorage.setItem('name', 'kelly jane');
20+
localStorage.setItem('address', 'street heaven god');
21+
localStorage.setItem('telp', '+628 9999 797979');
22+
23+
// and for whole remove storage use clear
24+
localStorage.clear(); //remove all key on storage

‎index.html

+61-4
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,11 @@
1616
text-transform: uppercase;
1717
} */
1818

19+
.black {
20+
color: #333;
21+
font-weight: bold;
22+
}
23+
1924
.red {
2025
colors: white;
2126
background: red;
@@ -31,9 +36,19 @@
3136
text-transform: uppercase;
3237
}
3338

34-
a {
39+
/* a {
3540
display: inline-block;
3641
margin-top: 100vh;
42+
} */
43+
44+
.btn {
45+
display: block;
46+
color: white;
47+
background: red;
48+
padding: 15px;
49+
text-transform: uppercase;
50+
font-size: 1.5rem;
51+
margin: 10px;
3752
}
3853
</style>
3954
</head>
@@ -155,10 +170,47 @@ <h3>The Pirates</h3>
155170
<!-- key events
156171
<input type="text" class="inputName" /> -->
157172

158-
<!-- even object -->
173+
<!-- even object
159174
<button class="btn">click me</button>
160175
<h1>some heading</h1>
161-
<a href="#" id="link">random link</a>
176+
<a href="#" id="link">random link</a> -->
177+
178+
<!-- currentTarget vs target
179+
<button class="btn">
180+
first button
181+
<h3>the heading</h3>
182+
</button>
183+
<button class="btn">
184+
second <strong>button <strong>more nested</strong></strong>
185+
</button>
186+
<button class="btn">
187+
third button
188+
<p>lorem10</p>
189+
</button> -->
190+
191+
<!-- event propogation_bubbling_capturing
192+
<div class="container">
193+
<ul class="list-items">
194+
<li class="item"><a href="#" class="link">link</a></li>
195+
<li class="item"><a href="#" class="link">link</a></li>
196+
<li class="item"><a href="#" class="link">link</a></li>
197+
</ul>
198+
</div> -->
199+
200+
<!-- example
201+
<div class="container">
202+
</div>
203+
<button class="btn">clicked</button> -->
204+
205+
<!-- forms event submit -->
206+
<!-- <form action="" id="form">
207+
<input type="text" id="name" />
208+
<input type="password" id="password" />
209+
<input type="submit" value="submit"></input>
210+
</form> -->
211+
212+
<!-- localStorage -->
213+
<h1>Local Storage</h1>
162214
<!-- source js -->
163215
<!-- <script src="/01_getElementById.js"></script> -->
164216
<!-- <script src="/02_getElementByTagName.js"></script> -->
@@ -179,6 +231,11 @@ <h1>some heading</h1>
179231
<!-- <script src="/17.addEventListener.js"></script> -->
180232
<!-- <script src="/18_function_reference.js"></script> -->
181233
<!-- <script src="/19_key_events.js"></script> -->
182-
<script src="/20_event_object.js"></script>
234+
<!-- <script src="/20_event_object.js"></script> -->
235+
<!-- <script src="/21_currentTarget_target.js"></script> -->
236+
<!-- <script src="/22_propogation_bubbling_capturing.js"></script> -->
237+
<!-- <script src="/23_example.js"></script> -->
238+
<!-- <script src="/24_forms_event_submit.js"></script> -->
239+
<script src="/25_local_storage.js"></script>
183240
</body>
184241
</html>

0 commit comments

Comments
 (0)
0