您的位置:

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中的查询参数使用正则表达式一个个匹配,并调用一个函数来将匹配到的参数名和参数值存入一个对象中。

JS获取localstorage的多个方面详解

2023-05-20
htmljs编程笔记(html代码笔记)

本文目录一览: 1、html代码和JS代码有什么区别 2、如何在html中调用js函数 3、JavaScript学习笔记之数组基本操作示例 4、HTML5初学者笔记 5、《web前端笔记7》js字符—

2023-12-08
SessionStorage与LocalStorage的用法

2023-05-23
java方法整理笔记(java总结)

2022-11-08
重学java笔记,java笔记总结

2022-11-23
怎么通过网页标签获取数据js的简单介绍

2022-11-25
java学习笔记(java初学笔记)

2022-11-14
js高级程序设计笔记14(js高级程序设计笔记14页)

本文目录一览: 1、JavaScript高级程序设计 该怎么看 2、JavaScript学习笔记之数组基本操作示例 3、JS中有关sort以及return的问题 JavaScript高级程序设计 该怎

2023-12-08
包含js网页正文抽取的词条

本文目录一览: 1、js获取网页当中所有标签里面的文本 2、javascript 怎么获取指定url网页中的内容 3、JS如何从另一个网页获取数据内容进行处理? 4、怎么用JS获取网页中指定标签内的选

2023-12-08
JS缓存三种方法的详细阐述

2023-05-22
java基础知识学习笔记一,Java基础笔记

2022-11-21
印象笔记记录java学习(Java成长笔记)

2022-11-12
从多个方面剖析localstorage删除数据

2023-05-20
发篇java复习笔记(java课程笔记)

2022-11-09
cookiejs本地网页,js获取页面cookie

本文目录一览: 1、为什么本地使用js或jquery操作cookie在谷歌浏览器chrome中不生效 2、用原js写获取本地cookie的方法 3、请问如何打开一个网页的时候用js将cookie置入进

2023-12-08
为知笔记私有化部署

2023-05-21
java客户端学习笔记(java开发笔记)

2022-11-14
怎么抽取网页整理,怎么抽取网页整理数据

2023-01-08
Mac笔记:在日常生活中高效实用的笔记工具

2023-05-18
python基础学习整理笔记,Python课堂笔记

2022-11-21