本地存储 cookie sessionStorage 和 localStorage (用法，作用，区别，案例)

相同作用

• 本地存储保存数据，都存储在浏览器端(客户端)

三者区别

1. 存储大小

   cookie 数据大小不能超过 4Kb，而 sessionStorage 和 localStorage 一般为 5MB 或更大

2. 生命周期

   cookie: 默认跟随浏览器关闭而销毁，但可以自己设置过期时间
   sessionStorage: 关闭页面或浏览器时销毁
   localStorage: 一直保存，不会自动销毁，除非手动销毁

3. 数据与服务器之间的交互

   cookie: 会在每次请求中被携带到服务器端，如果使用cookie保存过多数据会带来性能问题
   sessionStorage 和 localStorage: 只保存浏览器端，不参与服务器通信

4. 作用域

   sessionStorage: 只能在当前页面有效
   cookie 和 localStorage: 不同页面也会存在

cookie 的用法

// document.cookie='键=值', expires='过期时间'
// 保存
document.cookie = 'username = wq'
// 写一次 就多一个cookie
document.cookie = 'password = 123456'
// 获取  
console.log(document.cookie);
// 取出来是一个字符串形式 'username' = wq ; 'password= 123456'
// 就需要split()拆分处理字符串 获取 username 或者 password

sessionStorage 的用法

<input type="text">
<button class="set">本地存储</button>
<button class="get">获取数据</button>
<button class="remove">删除数据</button>
<button class="del">清空所有数据</button>

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.addEventListener('click', function() {
    var val = ipt.value;
    sessionStorage.setItem('uname', val)
    sessionStorage.setItem('password', val)
});

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

// 删除
remove.addEventListener('click', function() {
    var val = ipt.value;
    sessionStorage.removeItem('uname')
});

// 清除所有
del.addEventListener('click', function() {
    var val = ipt.value;
    sessionStorage.clear()
})

localStorage 的用法

<input type="text">
<button class="set">本地存储</button>
<button class="get">获取数据</button>
<button class="remove">删除数据</button>
<button class="del">清空所有数据</button>

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.addEventListener('click', function() {
    var val = ipt.value;
    localStorage.setItem('uname', val)
})

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

// 删除
remove.addEventListener('click', function() {
    var val = ipt.value;
    localStorage.removeItem('uname')
});

// 清除所有
del.addEventListener('click', function() {
    var val = ipt.value;
    localStorage.clear()
})

记住用户名小案例

<input type="text" id="uname">
<input type="checkbox" id="remember"> 记住用户名

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')
    }
})