前言

因为新接了个需求，解析地址栏url参数，如果带有特定参数service，就执行特定的操作。所以刚开始的时候我是这么处理的：

// a.html
const url = window.location.href;
const isService = url.includes('service')
sessionStorage.setItem('isUrl', isService);


// b.html
const isUrl = sessionStorage.getItem('isService')
if (isUrl) {
  // do something
  console.log(1)
  sessionStorage.removeItem('isUrl')
} else {
  console.log(2)
}

做完之后，我测试了一下，当url中不含service参数时，并没有如想象中的那样执行console.log(2)，而是相反，执行console.log(1)中的语句。

尝试修改

然后我加了两句代码，分别测试isService和isUrl的数据类型：

 // a.html
  const isService = url.includes('service');
  console.log(isService, typeof isService)
 
 // b.html
 const isUrl = sessionStorage.getItem('isUrl') 
 console.log(isUrl, typeof isUrl)

测试结果如下：

可以发现在存入sessionStorage之前，数据是boolean，存入之后，变成了string。

于是我刚刚的逻辑变成了字符串false，字符串false是存在的，于是就执行了第一句代码。

然后我将代码改了一下,将string转换为boolean。问题就解决了。

// b.html
 if (isUrl && JSON.parse(isUrl)) {
 console.log(1)
 } else {
 console.log(2)
 }

执行结果：

可以看到，结果与预期一致，修改成功。

h5本地缓存

那么sessionStorage本地存储可以存boolean类型的值吗？我做了实验，直接存入false。

可以看到，false被转成了string。

查看MND上关于localStorage和sessionStorage 的介绍。看到这么一句话：

也就是说，当使用sessionStorage或者localStorage存储键值对时，数据类型会自动转换成string。

所以在使用布尔值的本地存储做判断的时，一定要注意这里的类型转换。否则，会容易出现'false'存在，判断出错的问题。

微信小程序

在微信小程序的数据缓存介绍中，说明可以将数据以key/value的形式存储在本地缓存中，并且存储的data支持原生类型、Date、以及能够通过JSONStringify序列化的对象

在微信开发者工具里做个测试。

输出结果如下，可以看到存储的布尔值，并没有被转成字符串。

总结

H5以key/value的形式，存储本地缓存时，会自动转换数据类型为string。也就是说，当本地存储以trur和false做判断时，boolean会自动转换成'false'，会判定当前条件成立。
小程序以key/value存储本地缓存时，data的数据类型支持原生类型、Date、及能够通过JSON.stringify序列化的对象。所以这里可以直接存储boolean，并不会自动进行类型转换。

H5和微信小程序本地存储的类型转换

前言

尝试修改

h5本地缓存

微信小程序

总结