localStorage,sessionStorage

为每一个数据源维持一个存储区域


  • Huawei
  • 发布:2021-08-03
  • 1937次
  • localStorage,sessionStorage
  • sessionStorage 和 localStorage 的用法基本一致,引用类型的值要转换成JSON


    1. 保存数据到本地

    const info = {
        name: 'Lee',
        age: 20,
        id: '001'
    };
    
    sessionStorage.setItem('key', JSON.stringify(info));
    
    localStorage.setItem('key', JSON.stringify(info));

    2. 从本地存储获取数据

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

    3. 本地存储中删除某个保存的数据

    sessionStorage.removeItem('key');
    
    localStorage.removeItem('key');

    4. 删除所有保存的数据

    sessionStorage.clear();
    
    localStorage.clear();

    5. 监听本地存储的变化

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