The same effect

  • Local storage stores data, all stored on the browser side (client side)

The three difference

  1. Storage size

    Cookie data size cannot exceed 4Kb, while sessionStorage and localStorage are generally 5MB or larger

  2. The life cycle

    Cookie: The cookie is destroyed by default after the browser closes, but you can set the expiration time

    LocalStorage: always save and will not be automatically destroyed unless manually destroyed

  3. The interaction between data and the server

    Cookies: Are carried to the server on every request. Using cookies to store too much data can cause performance problems

    SessionStorage and localStorage: stores only the browser side and does not participate in server communication

  4. scope

    SessionStorage: only valid on the current page cookie and localStorage: different pages will also exist

The use of the cookie

// document.cookie=' key = value ', expires=' time '
/ / save
document.cookie = 'username = wq'
// Write one more cookie
document.cookie = 'password = 123456'
/ / to get
console.log(document.cookie);
'username' = wq; 'password= 123456'
// We need to split() the string to get username or password
Copy the code

The use of the sessionStorage

<input type="text">
<button class="set">The local store</button>
<button class="get">To get the data</button>
<button class="remove">Delete the data</button>
<button class="del">Clear all data</button>
Copy the code
ipt = document.querySelector('input');
var set = document.querySelector('.set');
var get = document.querySelector('.get');
var remove = document.querySelector('.remove');
var del = document.querySelector('.del');

/ / set
set.addEventListener('click'.function() {
    var val = ipt.value;
    sessionStorage.setItem('uname', val)
    sessionStorage.setItem('password', val)
});

/ / to get
get.addEventListener('click'.function() {
    var val = ipt.value;
    console.log(sessionStorage.getItem('uname'));
});

/ / delete
remove.addEventListener('click'.function() {
    var val = ipt.value;
    sessionStorage.removeItem('uname')});// Clear all
del.addEventListener('click'.function() {
    var val = ipt.value;
    sessionStorage.clear()
})
Copy the code

The use of the localStorage

<input type="text">
<button class="set">The local store</button>
<button class="get">To get the data</button>
<button class="remove">Delete the data</button>
<button class="del">Clear all data</button>
Copy the code
ipt = document.querySelector('input');
var set = document.querySelector('.set');
var get = document.querySelector('.get');
var remove = document.querySelector('.remove');
var del = document.querySelector('.del');

/ / set
set.addEventListener('click'.function() {
    var val = ipt.value;
    localStorage.setItem('uname', val)
})

/ / to get
get.addEventListener('click'.function() {
    var val = ipt.value;
    console.log(localStorage.getItem('uname'));
})

/ / delete
remove.addEventListener('click'.function() {
    var val = ipt.value;
    localStorage.removeItem('uname')});// Clear all
del.addEventListener('click'.function() {
    var val = ipt.value;
    localStorage.clear()
})
Copy the code

Remember user names

<input type="text" id="uname">
<input type="checkbox" id="remember">Remember the usernameCopy the code
var uname = document.querySelector('#uname')
var remember = document.querySelector('#remember')
if(localStorage.getItem('uname')) {
    uname.value = localStorage.getItem('uname');
    remember.checked = true;
}
remember.addEventListener('change'.function() {
    if(this.checked) {
        localStorage.setItem('uname', uname.value)
    } else {
        localStorage.removeItem('uname')}})Copy the code