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中的查詢參數使用正則表達式一個個匹配，並調用一個函數來將匹配到的參數名和參數值存入一個對象中。