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!
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”]