HTML5 localStorage
by yz
function() {
!
var name=
document.getElementById('name').value;
!
!
localStorage.setItem('name', name);!
});
What is local storage?
• data stored in your local computer

=> faster loading :)
• data persists even after you navigate ...
review: cache and cookies
• Cache: a temporary storage of web page
resources stored on client’s machine

for quicker loadi...
HTML5 Local Storage
it’s a way for web pages to store named key/value pairs

locally, within the client web browser
Is it different from Cache or
Cookies?
• Cache: speed up loading the page (video, audio,
text messages)
• Cookies: store i...
Is it different from Cache or
Cookies?
• Cookie: user info to be used on the server side
• localStorage: user info to be u...
Is it different from Cache or
Cookies?
• Cookie: limited to 4 KB of data
• localStorage: 5MG of data
Is it different from Cache or
Cookies?
• Cookie: sent in every HTTP request
• localStorage: not sent in request
How to use localStorage
• Set the key & value pair!
• Retrieve the data!
• Remove the data!
function() {
!
var name=
document.getElementById('name').value;
!
!
localStorage.setItem('name', name);!
});
<input type="...
window.onload = function() {
var name = localStorage.getItem('name');
!
if (name != "undefined" || name != "null") {
docume...
localStorage.removeItem('name');
Remove the data!
localStorage.clear();
Summary
• wanna get a lot of user information and use it on
the client side ?

=> use localStorage!
• set, retrieve, remov...
Upcoming SlideShare
Loading in...5
×

Lt local storage

341

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
341
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Lt local storage"

  1. 1. HTML5 localStorage by yz
  2. 2. function() { ! var name= document.getElementById('name').value; ! ! localStorage.setItem('name', name);! });
  3. 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. 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. 5. HTML5 Local Storage it’s a way for web pages to store named key/value pairs
 locally, within the client web browser
  6. 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. 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. 8. Is it different from Cache or Cookies? • Cookie: limited to 4 KB of data • localStorage: 5MG of data
  9. 9. Is it different from Cache or Cookies? • Cookie: sent in every HTTP request • localStorage: not sent in request
  10. 10. How to use localStorage • Set the key & value pair! • Retrieve the data! • Remove the data!
  11. 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. 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. 13. localStorage.removeItem('name'); Remove the data! localStorage.clear();
  14. 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”]

  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×