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

【问题标题】：Lost data stored in localStorage issue丢失存储在 localStorage 问题中的数据
【发布时间】：2022-01-02 20:21:30
【问题描述】：

我有一个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');
}
....

如果token是undefined我会返回null，否则继续验证。

有两个问题我看不懂：

为什么我在刷新页面时丢失了 localStorage 中的令牌
为什么token为undefined时if ( !token )返回false，第一个console.log返回undefined，但我的方法继续const parts = token.split('.');。

【问题讨论】：

您的代码 sn-p 中没有本地存储的迹象。
请检查您是否没有将undefined 字符串存储为localStorage 的值????
您应该考虑默认验证“失败”。并且只有通过验证才能成功。
而且您不应该将令牌存储在本地存储中。这是一个安全问题。
@Ashish no 我将令牌存储在本地存储中，当我不刷新页面时令牌被正确记录，但是当我刷新页面时我得到未定义

标签： javascript angular typescript undefined

【解决方案1】：

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

MDN：Window.localStorage

使用 localStorage 存储的键和值始终采用 UTF-16 DOMString 格式，每个字符使用两个字节。与对象一样，整数键会自动转换为字符串。

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 值。

注意事项：

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

【讨论】：

好的，我会按照这些步骤进行，我想要最后一件事，那么存储令牌的最佳做法是什么？
@Doesn'tMatter 这里你可以看到blog.logrocket.com/jwt-authentication-best-practices/…
对于未来，我遵循我的代码，并且有效地，我发现：当我刷新页面时我刷新了令牌，在这里我设置了 undefined 而不是正确的值，谢谢你的回答我欣赏它
@Doesn'tMatter，看看我的答案：stackoverflow.com/questions/57650692/…