localStorage.username 和 localStorage.getItem(‘username‘)

localStorage.username 和 localStorage.getItem(‘username‘)有什么区别

直接属性访问（ localStorage.username或localStorage[‘username’] ）和使用函数接口（ getItem(‘username’) ）都可以正常工作。 两者都是标准和跨浏览器兼容。

但是当没有查询到具有所请求名称的键/值对时，它们的行为会有所不同。 例如，如果键’username’不存在， var a = localStorage.username; 会导致a 为 undefined ，而var a = localStorage.getItem(‘username’); 将导致a值为null 。 而在JavaScript中，undefined和null是不可互换的。

1、查询浏览器当前网页的localStorage总量？

(function() {
    if(!window.localStorage) {
        console.log('当前浏览器不支持localStorage!')
    }    
    var test = '0123456789';
    var add = function(num) {
        num += num;
        if(num.length == 10240) {
            test = num;
            return;
        }
        add(num);
    }
    add(test);
    var sum = test;
    var show = setInterval(function(){
        sum += test;
        try {
            window.localStorage.removeItem('test');
            window.localStorage.setItem('test', sum);
            console.log(sum.length / 1024 + 'KB');
        } catch(e) {
            alert(sum.length / 1024 + 'KB超出最大限制');
            clearInterval(show);
        }
    }, 20)
})()

2、查询浏览器当前网页占用的localStorage容量 ？

unescape(encodeURIComponent(JSON.stringify(localStorage))).length

查询浏览器当前网页剩余的localstorage容量？

1024 * 1024 * 5 - unescape(encodeURIComponent(JSON.stringify(localStorage))).length;
// 一般浏览器localStorage总量为5M，或者可用第一个方法先查询浏览器当前网页的localStorage总量