当前位置：首页 > news >正文

web前端面试题附答案041 - 曾经一个百度面试官问我，localStorage可以存对象吗？

news 来源：原创 2024/5/19 11:47:24

曾经一个百度面试官问我，localStorage可以存对象吗？

很显然，localStorage这5M的存储虽然有限，但对于前端这点数据量来说，大部分情况几乎是无所不能存了。你说你有个全局变量，全局对象，想怎么存怎么存，但对于刚接触的同学来说，似乎有点模糊，面试官这是啥意思，是比较高深的用法吗？

1、先存一个数值型看看

<script>
   let a = 100;
   window.localStorage.setItem('my', a);
   let getA = window.localStorage.getItem('my');
   console.log('-----', getA);  // 100
 </script>

最初大家可能都是这么用的，我有一个值，数值型的，然后存到localStorage里，初次使用感觉真的太好用了，比cookie好用一万倍。把值存起来，也不用自己封装cookie的方法，这么一个小API想用就用。但取出来使用的时候，总感觉哪里不对，怪怪的，用着用着就不对了。例如这样

<script>
   let a = 100;
   window.localStorage.setItem('my', a);
   let getA = window.localStorage.getItem('my');
   console.log('-----', getA);
   let b = getA + 5;
   console.log('===', b); // 1005
</script>

我原本是希望输出105的，谁知道成了1005，这明显是变成了字符串拼接

2、存一个null或者undefined值进去试试

我原本定义了一个undefined值，存进localStorage里，当我某一天取出来，想用来做判断使用的，谁知道连undefined也变态了

<script>
  let a = null;
  let b = undefined;
  window.localStorage.setItem('mya', a);
  window.localStorage.setItem('myb', b);

  let getA = window.localStorage.getItem('mya');
  let getB = window.localStorage.getItem('myb');
  if (!getB) {
      console.log('---展开程序人生--');
  } else {
      console.log(typeof(getB)); // string
      console.log('---糟了 undefined 变了--');
   }
</script>

是不是发现很讨厌，数值型变了，拿出来想使用得将字符串类型改为数值型，存个undefined也变成了字符串类型，那么如果存个对象呢，几乎就不用试了，肯定也是字符串类型了。所以，都要提前预备好类型转换的对应方法，否则直接拿来用就会出现问题。

这就是使用localStorage的有点与缺点了吧。