Skip to content

Commit 7a34705

Browse files
AndrewSouthpawAndrewSouthpaw
committed
Add localstorage exercise.
1 parent be93bda commit 7a34705

7 files changed

Lines changed: 101 additions & 19 deletions

File tree

‎content/js/apis/webstorage/index.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,4 @@ Web Storage
33

44
<<(basics.md)
55
<<(support.md)
6-
<<(labs.md#ex-storage-chat)
6+
<<(labs.md)

‎content/js/apis/webstorage/labs.md‎

Lines changed: 3 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,5 @@
1-
### Exercise: Chatroom Replay ### {#ex-storage-chat}
1+
### Exercise
22

3-
#. Start your server if it isn't running
3+
#. Go to http://localhost:3000/js/browser/storage.html
44

5-
#. When receiving an incoming message from the chat server cache the
6-
message in the `sessionStorage`.
7-
8-
#. When the page first loads insert all of the cached chat messages
9-
into the UI.
10-
11-
#. Open the following files:
12-
13-
- `src/www/js/discography/components/chat.js`
14-
15-
#. Fill in the missing pieces
16-
17-
#. Send some chat messages then reload:
18-
19-
http://localhost:3000/js/discography/
5+
#. Open `src/www/js/browser/storage.js` and follow instructions

‎content/js/browser/index.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
## Browser APIs
22

33
<<(./timers.md)
4-
4+
<<(../apis/webstorage/index.html)

‎src/www/js/browser/storage.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<html>
2+
<head>
3+
<style></style>
4+
</head>
5+
<body>
6+
7+
<h1>Exercise 1</h1>
8+
9+
<div id="ex1-cookie-consent">
10+
<p>Do you consent to using cookies?</p>
11+
12+
<button id="ex1-cookie-yes">Mmm, cookies!</button>
13+
<button id="ex1-cookie-no">No way!</button>
14+
</div>
15+
16+
<p>
17+
<button id="ex1-reset">Reset choice</button>
18+
</p>
19+
20+
<div id="ex1-using-cookies" style="display: none">
21+
<p>You are using cookies. Delicious.</p>
22+
<img src="https://media.giphy.com/media/xT0xeMA62E1XIlup68/giphy-downsized.gif" width="300">
23+
</div>
24+
25+
<div id="ex1-not-using-cookies" style="display: none">
26+
<p>You are not using cookies. Too bad for you.</p>
27+
<img src="https://media.giphy.com/media/l3q2XhhTfFlgagUtW/giphy.gif" width="300">
28+
</div>
29+
30+
<script type="module" src="storage.js"></script>
31+
</body>
32+
</html>

‎src/www/js/browser/storage.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/**
2+
* Exercise 1
3+
* ============================================
4+
*
5+
* Prompt the user to accept/deny cookies. When they make their choice,
6+
* display the appropriate section. Store their response locally, so that
7+
* reloading the page still displays their preference.
8+
*
9+
* Implement the "reset" button to allow them to reset their choice.
10+
*/
11+
12+
// code

‎src/www/js/browser/storage.solution.js‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
/**
2+
* Exercise 1
3+
* ============================================
4+
*
5+
* Prompt the user to accept/deny cookies. When they make their choice,
6+
* display the appropriate section. Store their response locally, so that
7+
* reloading the page still displays their preference.
8+
*
9+
* Implement the "reset" button to allow them to reset their choice.
10+
*/
11+
12+
let cookiesEnabled = JSON.parse(localStorage.getItem('cookiesEnabled'))
13+
14+
const showUsingCookies = () => {
15+
document.getElementById('ex1-cookie-consent').style.display = 'none'
16+
document.getElementById('ex1-using-cookies').style.display = 'block'
17+
}
18+
19+
const showNotUsingCookies = () => {
20+
document.getElementById('ex1-cookie-consent').style.display = 'none'
21+
document.getElementById('ex1-not-using-cookies').style.display = 'block'
22+
}
23+
24+
const storeChoice = (enabled) => {
25+
localStorage.setItem('cookiesEnabled', enabled.toString())
26+
}
27+
28+
document.getElementById('ex1-cookie-yes').addEventListener('click', () => {
29+
cookiesEnabled = true
30+
showUsingCookies()
31+
storeChoice(true)
32+
})
33+
34+
document.getElementById('ex1-cookie-no').addEventListener('click', () => {
35+
cookiesEnabled = false
36+
showNotUsingCookies()
37+
storeChoice(false)
38+
})
39+
40+
document.getElementById('ex1-reset').addEventListener('click', () => {
41+
localStorage.removeItem('cookiesEnabled')
42+
document.getElementById('ex1-cookie-consent').style.display = 'block'
43+
document.getElementById('ex1-using-cookies').style.display = 'none'
44+
document.getElementById('ex1-not-using-cookies').style.display = 'none'
45+
})
46+
47+
if (cookiesEnabled != undefined) {
48+
cookiesEnabled ? showUsingCookies() : showNotUsingCookies()
49+
}
50+
51+
// (cookiesEnabled && cookiesEnabled !== undefined) ? showUsingCookies() : showNotUsingCookies()

‎src/www/js/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ <h2>JavaScript in the Browser Exercises:</h2>
2727
<li><a href="artists/index.html">Artists (Ajax)</a></li>
2828
<li><a href="browser/timers.html">Timers</a></li>
2929
<li><a href="browser/throttling.html">Event throttling</a></li>
30+
<li><a href="browser/storage.html">Storage</a></li>
3031
</ol>
3132
</section>
3233

0 commit comments

Comments
 (0)