丢失存储在 localStorage 问题中的数据

Question

我有一个 token 存储在 localStorage 中，我还有一个验证令牌是否正确的方法，如您在这段代码中所见：

let token = localStorage.getItem('token');
console.log(token);

if ( !token )
{
    return null;
}

const parts = token.split('.');

if ( parts.length !== 3 )
{
    throw new Error('error');
}
....

如果令牌是 undefined 我将 return 为 null，否则继续验证。

有两个问题我无法理解：

为什么我在刷新页面时丢失了localStorage中的token
为什么if ( !token ) return false when token is undefined, first console.log return undefined, but my method continues至 const parts = token.split('.');.

Answer 1

本地存储仅适用于字符串。

MDN: Window.localStorage

The keys and the values stored with localStorage are always in the UTF-16 DOMString format, which uses two bytes per character. As with objects, integer keys are automatically converted to strings.

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

所以，每个值都被序列化为一个字符串。

localStorage.setItem('token', undefined);
let token = localStorage.getItem('token');
console.log(token);
console.log(typeof(token));

在控制台打印出来：

undefined
string

结论:

不要在本地存储中存储 null 和 undefined。
验证本地存储中的值时，始终将其视为 string 值。

备注：

默认情况下验证应该 return false。只有在成功的情况下才应该 return true.
您不应在本地存储中存储任何令牌，它不安全。
您不应在客户端上验证任何内容，因为验证逻辑很容易被操纵。

丢失存储在 localStorage 问题中的数据

Lost data stored in localStorage issue

javascript

angular

typescript

undefined