H5中的localStorage与sessionStorage

📗目录

        一、sessionStorage和localStorage 

         1.设置数据

         2.读取数据

         3.删除数据

         4. 监听本地存储的变化

         5.区别

🟢一、sessionStorage和localStorage

sessionStorage和localStorage一样，都是用来缓存客户端缓存信息。

只能存储字符串类型对象。

🟢1.设置数据

localStorage.setItem(key,value);

sessionStorage.setItem(key,value);

localStorage.setItem('key','value');//以key为名称存储一个value值
localStorage.getItem('key');//得到名称为key的值ringify(info));

🟢2.读取数据

localStorage.getItem(key);

sessionStorage.getItem(key);

    var data1 = JSON.parse(sessionStorage.getItem('key'));
    var data2 = JSON.parse(localStorage.getItem('key'));

🟢3.删除数据

localStorage.removeItem(key);

sessionStorage.removeItem(key);

//删除localStorage中存储信息的方法

localStorage.removeItem('key);  //删除名称为“key”的信息。
localStorage.clear();  //清除所有方法

🟢4. 监听本地存储的变化

Storage 发生变化（增加、更新、删除）时的 触发，同一个页面发生的改变不会触发，只会监听同一域名下其他页面改变 Storage

    window.addEventListener('storage', function (e) {
        console.log('key', e.key);
        console.log('oldValue', e.oldValue);
        console.log('newValue', e.newValue);
        console.log('url', e.url);
    })

 🟢区别

• localStorage和sessionStorage的区别在于存储的有效期和作用域的不同。
• localStorage的生命周期是永久的，除非用户主动清除浏览器UI上存储的localStorage信息，否则它将永久存在。
• sessionStorage的生命周期是存在于标签页或窗口，用于本地存储一个会话（session）中的数据，这些数据随着窗口或标签页的关闭而被清空。因此其仅仅是会话级别的本地存储