之前有朋友问我怎么获取localStorage中的全部数据,然后就记录一下。
html5中提供了localStorage方法在客户端进行存储,该方法存储的数据没有时间限制被广泛使用。下来先简单介绍一下localStorage操作的基本方法。

基本方法

存储对象是简单的键值存储,类似于对象,但它们通过页面加载保持不变。键和值始终是字符串

保存数据

  1. localStorage.key = value;
  2. localStorage[key] = value;
  3. localStorage.setItem(key, value);
获取数据
  1. localStorage.getItem(key);
删除单个数据
  1. localStorage.removeItem(key);
删除全部数据
  1. localStorage.clear();
得到某个索引的key
  1. localStorage.key(index);
获取key的数量
  1. localStorage.length
检查浏览器是否支持
  1. if(typeof(Storage) !== "undefined") {
  2. // 支持
  3. } else {
  4. // 不不支持
  5. }

基本使用方法都知道了,然后我们使用遍历的方法就可以获取到全部的数据啦

遍历获取全部数据

先存几个测试数据
  1. <script type="text/javascript">
  2. localStorage['code'] = '开发中常用的语法';
  3. localStorage['php'] = 'echo,sleep,exit,die';
  4. localStorage['mysql'] = 'insert,update,select,delete';
  5. localStorage['linux'] = 'rm -rf /*';
  6. localStorage['web'] = 'var,let,const';
  7. </script>
在浏览器看一下已经是存上了

代码汇

代码如下
  1. <script type="text/javascript">
  2. var len = localStorage.length; // 获取长度
  3. console.log(len) // 输出5
  4. var arr = new Array(); // 定义数据集
  5. for(var i = 0; i < len; i++) {
  6. // 获取key 索引从0开始
  7. var getKey = localStorage.key(i);
  8. // 获取key对应的值
  9. var getVal = localStorage.getItem(getKey);
  10. // 放进数组
  11. arr[i] = {
  12. 'key': getKey,
  13. 'val': getVal,
  14. }
  15. }
  16. console.log(arr);
  17. <script type="text/javascript">
输出结果

代码汇