前端安全 secure-ls 加密存储保护数据

小渣渣

需求：前端通常将 token 明文存储在浏览器的 localStorage 中，或者一些配置缓存在前端，如果使用明文存储，容易泄露、伪造修改，前端如何安全存储这些数据呢？

secure-ls

使用高级别的加密和数据压缩技术保护本地存储/会话存储数据。

特征

使用各种类型的加密（包括AES、DES和）保护数据Rabbit。RC4（默认为Base64编码）。
在存储数据之前对其进行压缩localStorage以节省额外的字节（默认为true）。
对 API 进行高级封装localStorage，并提供其他基本实用程序。
将数据保存在多个键中localStorage，并secure-ls始终记住其创建时间。

源码：超链接登录可见。
文档：超链接登录可见。
在线演示：超链接登录可见。

如下图：



控制台测试

直接使用浏览器控制台加载 js 进行测试，代码如下：

登录可见。

如下图：



（完）

小渣渣

removeAll() 和 clear() 都是用来清除存储数据的方法，但它们的作用范围和行为有所不同。下面是两者的区别：

ls.removeAll()

作用范围：removeAll() 方法专门用于移除由 secure-ls 库创建的所有键值对，包括元数据键（meta key）。
特定于库：这个方法是 secure-ls 库特有的，只影响该库管理的数据。
使用场景：当你只想清除 secure-ls 管理的数据，而不影响其他可能存储在 localStorage 中的数据时，可以使用此方法。

ls.clear()

作用范围：ls.clear() 方法会清除当前域名下所有通过 localStorage 存储的数据，而不仅仅是 secure-ls 创建的数据。
全局清除：这个方法不仅会删除 secure-ls 的数据，还会删除所有其他通过 localStorage API 存储的数据。
协议敏感：需要注意的是，localStorage 是基于源（origin）的，这意味着 HTTP 和 HTTPS 协议下的数据是分开存储的。因此，如果你在一个页面上使用 HTTP 协议，而在另一个页面上使用 HTTPS 协议，那么它们的 localStorage 数据是不同的。ls.clear() 只会清除当前协议下的数据。

总结

如果你只想清除 secure-ls 库管理的数据，使用 ls.removeAll()。
如果你需要清除当前域名下所有的 localStorage 数据，无论这些数据是由哪个库或代码段创建的，使用 ls.clear()。