1. HTML5 localStorage
by yz

2. function() {
!
var name=
document.getElementById('name').value;
!
!
localStorage.setItem('name', name);!
});

3. What is local storage?
• data stored in your local computer
=> faster loading :)
• data persists even after you navigate away from the
web site, close your browser tab, exit your browser,
• Cookies and cache are also local storage

4. review: cache and cookies
• Cache: a temporary storage of web page
resources stored on client’s machine
for quicker loading of the web pages!
• Cookies: a very small piece of information that is
stored on the client’s machine by the web site and
is sent back to the server each time a page is
requested to store information
for tracking different characteristics related to
user

5. HTML5 Local Storage
it’s a way for web pages to store named key/value pairs
locally, within the client web browser

6. Is it different from Cache or
Cookies?
• Cache: speed up loading the page (video, audio,
text messages)
• Cookies: store info about the user
!
• localStorage: store info about the user
to use on the server side
to use on the client side

7. Is it different from Cache or
Cookies?
• Cookie: user info to be used on the server side
• localStorage: user info to be used on the client
side
function() {
!
var name=
document.getElementById('name').value;
!
!
localStorage.setItem('name', name);!
});
get ‘/’ do
!
@user =
User.find(session[:id])
erb: index
end

8. Is it different from Cache or
Cookies?
• Cookie: limited to 4 KB of data
• localStorage: 5MG of data

9. Is it different from Cache or
Cookies?
• Cookie: sent in every HTTP request
• localStorage: not sent in request

10. How to use localStorage
• Set the key & value pair!
• Retrieve the data!
• Remove the data!

11. function() {
!
var name=
document.getElementById('name').value;
!
!
localStorage.setItem('name', name);!
});
<input type="name" name="name" id=“name">
Set the key & value pair!
localStorage[“name”] = name

12. window.onload = function() {
var name = localStorage.getItem('name');
!
if (name != "undefined" || name != "null") {
document.getElementById('welcomeMessage').innerHTML = "Hello " +
name + "!";
} else
document.getElementById('welcomeMessage').innerHTML = "Hello!";
}
}
Retrieve the data!
localStorage[“name”]

13. localStorage.removeItem('name');
Remove the data!
localStorage.clear();

14. Summary
• wanna get a lot of user information and use it on
the client side ?
=> use localStorage!
• set, retrieve, remove the data!
localStorage.setItem(“key”,”value”)
localStorage[“key”]