JS获取localstorage的多个方面详解

一、js获取localstorage的key

localstorage是HTML5新增的一种非常方便的浏览器本地存储的方式，它通过key-value的形式来存储数据，我们可以使用如下代码获取其中的key：

  
    for (var i = 0; i < localStorage.length; i++) {
      console.log(localStorage.key(i));
    }
  

上述代码通过for循环从localStorage中获取所有的key，并通过console.log()输出。如果我们需要在页面上展示这些key，可以通过如下代码：

  
    var keys = "";
    for (var i = 0; i < localStorage.length; i++) {
      keys += localStorage.key(i) + "
";
    }
    document.getElementById("keyList").innerHTML = keys;
  

其中document.getElementById(“keyList”).innerHTML是将keys的值赋予一个id为keyList的html标签，并且使用innerHTML属性设置inner html

二、Js获取数组下标对应的值

我们可以通过localStorage.getItem()方法获取指定key对应的值，如下所示：

  
    var value = localStorage.getItem(key);
    console.log(value);
  

此外，我们也可以通过下标索引获取local storage中的值，如下所示：

  
    var value = localStorage[0];
    console.log(value);
  

三、js获取local storage本地存储

通过在Chrome浏览器的控制台中输入localStorage，我们可以看到当前页面的所有local storage本地存储。

  
    console.log(localStorage);
  

四、js获取localstorage值

我们可以通过localStorage.getItem()方法获取local storage中指定key对应的值，如下所示：

  
    var value = localStorage.getItem(key);
    console.log(value);
  

如果我们希望获取所有的本地存储值，可以使用for循环遍历所有key并获取对应的value，如下所示：

  
      for (var i = 0; i < localStorage.length; i++) {
        var key = localStorage.key(i);
        var value = localStorage.getItem(key);
        console.log(key + ": " + value);
      }
  

五、js获取localstorage存储大小

我们可以通过localStorage.length来获取local storage中key-value对的数量，实际上，key与value的大小总和是localStorage的总大小。如下所示：

  
    console.log("LocalStorage Size: " + (JSON.stringify(localStorage).length / 1024).toFixed(2) + " KB");
  

上述代码通过JSON.stringify()方法将localStorage转化为JSON字符串再计算其大小。

六、js获取get参数

我们可以通过window.location.search来获取当前网页的get参数，如下所示：

  
    var params = window.location.search.substr(1).split("&");
    var paramObj = {};
    for (var i = 0; i < params.length; i++) {
      var p = params[i].split("=");
      paramObj[p[0]] = p[1];
    }
    console.log(paramObj);
  

上述代码通过window.location.search获取当前url中的查询参数，然后使用substr()方法去除开头的问号，再使用split(‘&’)方法将参数拆分为数组，最后使用split(‘=’)方法将参数名和参数值分离并赋值给一个对象。

七、js获取id

我们可以通过document.getElementById()方法获取html标签的id属性对应的值，如下所示：

  
    var el = document.getElementById('myElementId');
    console.log(el);
  

八、Js获取当前时间戳

我们可以使用Date.now()方法获取当前时间的时间戳（UTC时间表示从1970年1月1日零时起至当前时间的毫秒数）。

  
    var timestamp = Date.now();
    console.log(timestamp);
  

九、Js获取get参数

我们可以使用正则表达式获取当前url中的查询参数，如下所示：

  
    var url = window.location.search;
    var obj = {};
    url.replace(/([^?&=]*)=([^&]+)/g, function(m, key, value) {
      obj[decodeURIComponent(key)] = decodeURIComponent(value);
    });
    console.log(obj);
  

上述代码中，replace()方法将url中的查询参数使用正则表达式一个个匹配，并调用一个函数来将匹配到的参数名和参数值存入一个对象中。