JavaScript (七) —— 本地存储

本地存储特性

1. 数据存储在用户浏览器中
2. 设置 , 读取方便 , 甚至刷新不丢失数据
3. 容量大 sessionStorage约5M , localStorage约20M
4. 只能存储字符串 , 可以将对象JSON.stringify()后再存储

localStorage

特性 :

1. 生命周期永久有效 , 除非手动删除
2. 可以多窗口(页面)共享(同一浏览器共享)
3. 以键值对的形式储存使用

• localStorage.setItem(key, value) 存储数据
• localStorage.getItem(key) 获取数据
• localStorage.removeItem(key) 删除数据
• localStorage.clear() 删除所有数据

	//添加到本地存储
    set.addEventListener('click', function() { 
        var val = input.value;
        localStorage.setItem('userName',val);
    })
    //获取本地存储
    get.addEventListener('click',function() {
        console.log(localStorage('userName'));
    })
    //删除本地存储
    remove.addEventListener('click',function() {
        localStorage.removeItem('userName');
    })
    //清空本地存储
    del.addEventListener('click', function() {
        localStorage.clear();
    })

sessionStorage

(和上面localStorage用法一样)

特性 :

1. 生命周期为关闭浏览器窗口
2. 在**同一个窗口(页面)**下数据共享
3. 以键值对的形式存储使用

• sessionStorage.setItem(key, value) 存储数据
• sessionStorage.getItem(key) 获取数据
• sessionStorage.removeItem(key) 删除数据
• sessionStorage.clear() 删除所有数据