复习笔记之API(19) 本地存储 sessionStorag

本地存储

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变得越来越复杂。为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案

• 本地存储的特性：
  1. 数据存储在用户浏览器中
  2. 设置、读取方便，甚至页面刷新不丢失数据
  3. 容量比较大，sessionStorage约5M，localStorage约20M
  4. 只能存储字符串，可以将对象JSON.stringify()编码后存储

sessionStorage数据的存储以及获取

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

// window.可以省略
// 存储数据
window.sessionStorage.setItem(key,value);
// 获取数据
sessionStorage.getItem(key);
// 删除数据
sessionStorage.removeItem(key);
// 清除所有数据
sessionStorage.clear();

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

<script>
    let inp = document.querySelector('input'),
        set = document.querySelector('.set'),
        get = document.querySelector('.get'),
        remove = document.querySelector('.remove'),
        del = document.querySelector('.del');
    // 存储数据
    set.addEventListener('click',function() {
        // 当我们点击了之后就可以把表单里的数据存储起来
        let val = inp.value;
        sessionStorage.setItem('username',val);
        sessionStorage.setItem('password',val);
    });
    // 获取数据
    get.taddEventListener('click',function() {
        // 当我们点击了之后就可以把表单里的数据获取过来
        sessionStorage.getItem('username');
    });
    // 删除数据
    remove.taddEventListener('click',function() {
        // 当我们点击了之后就把对应的数据删除掉
        sessionStorage.removeItem('username');
    });
    // 清除所有数据
    del.taddEventListener('click',function() {
        // 当我们点击了之后就清除所有的数据
        sessionStorage.clear('username');
    });
</script>

localStorage数据的存储以及获取

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

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

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

<script>
    let inp = document.querySelector('input'),
        set = document.querySelector('.set'),
        get = document.querySelector('.get'),
        remove = document.querySelector('.remove'),
        del = document.querySelector('.del');
    // 存储数据
    set.addEventListener('click',function() {
        // 当我们点击了之后就可以把表单里的数据存储起来
        let val = inp.value;
        localStorage.setItem('username',val);
        localStorage.setItem('password',val);
    });
    // 获取数据
    get.taddEventListener('click',function() {
        // 当我们点击了之后就可以把表单里的数据获取过来
        console.log(localStorage.getItem('username'));
    });
    // 删除数据
    remove.taddEventListener('click',function() {
        // 当我们点击了之后就把对应的数据删除掉
        localStorage.removeItem('username');
    });
    // 清除所有数据
    del.taddEventListener('click',function() {
        // 当我们点击了之后就清除所有的数据
        localStorage.clear('username');
    });
</local

sessionStorage和localStorage的区别

• 生命周期不同
• 数据的共享不同