localStorage和sessionStorage

一、sessionStorage 会话缓存

1.sessionStorage  会话缓存
- 缓存的时间为当前tab页面浏览器打开期间  关闭清除
    console.log(sessionStorage);

    // 属性
    // length   缓存数据的条数
    console.log(sessionStorage.length);


    var aBtns=document.getElementsByTagName("button");
    // 方法

    // 设置缓存  setItem("key","value")
    aBtns[0].onclick=function(){
        sessionStorage.setItem("姓名","张飞");
        sessionStorage.setItem("年龄","1000");
    }

    // 获取缓存  getItem("key")
    aBtns[1].onclick=function(){
        console.log(sessionStorage.getItem("姓名"))
        // sessionStorage.setItem("年龄","1000");
    }

    // 删除  removeItem("key")
    aBtns[2].onclick=function(){
        sessionStorage.removeItem("姓名")
        // sessionStorage.setItem("年龄","1000");
    }

    // 清空  clear()  删除所有数据
    aBtns[3].onclick=function(){
        sessionStorage.clear()
    }

二、localStorage 本地缓存

localStorage  本地缓存
- 永久缓存  只能手动清除  其他的tab页面也可以获取到
    console.log(localStorage);

    // 属性
    // length   缓存数据的条数
    console.log(localStorage.length);


    var aBtns=document.getElementsByTagName("button");
    // 方法

    // 设置缓存  setItem("key","value")
    aBtns[0].onclick=function(){
        localStorage.setItem("姓名","张飞");
        localStorage.setItem("年龄","1000");
    }

    // 获取缓存  getItem("key")
    aBtns[1].onclick=function(){
        console.log(localStorage.getItem("姓名"))
        // localStorage.setItem("年龄","1000");
    }

    // 删除  removeItem("key")
    aBtns[2].onclick=function(){
        localStorage.removeItem("姓名")
        // localStorage.setItem("年龄","1000");
    }

    // 清空  clear()  删除所有数据
    aBtns[3].onclick=function(){
        localStorage.clear()
    }