游览器中的storage和微信小程序中的storage——【本地存储】

前言

        游览器中的storage包括localStorage和sessionStorage两种存储方式，它们都是Web Storage API的一部分，用于在用户浏览器端存储数据。具体介绍如下：

1. 生命周期：localStorage的生命周期是永久的，即使浏览器关闭后，数据仍然存在。而sessionStorage的生命周期仅限于当前会话，一旦窗口或标签页关闭，数据就会被清除。
2. 存储限制：为了避免滥用存储空间导致浏览器性能下降，这两种存储方式都有容量限制。虽然具体限制取决于浏览器的实现，但通常不会低于5MB。
3. 数据同步：localStorage和sessionStorage都是同步的，这意味着数据的读写操作会在主线程上执行，如果存储的数据量非常大，可能会阻塞主线程，影响页面性能。
4. 兼容性：现代浏览器都支持这两种存储方式，但如果是旧版本的浏览器，可能需要进行兼容性处理。
5. 应用场景：localStorage适合用于长期保存用户数据，如个性化设置、主题等。而sessionStorage适合用于临时保存会话数据，如购物车信息、游戏分数等。
6. 安全性：尽管这两种存储方式提供了数据持久化的功能，但它们并不是安全的，不应该用来存储敏感信息，因为存储的数据可以被JavaScript访问，也可能受到XSS攻击的影响。
7. 与cookie的区别：与基于HTTP规范的cookie不同，Web Storage提供的存储空间更大，且数据只存储在客户端，不会随着HTTP请求发送到服务器。

了解这些特性可以帮助开发者根据不同的应用场景选择合适的存储方式，以提供更好的用户体验和数据管理。

---

        微信小程序的storage缓存是用于在用户设备上存储数据的机制，它有10MB的最大限制。其特点和使用方法如下：

1. 用户数据隔离：微信用户的每个小程序都有独立的storage空间，同一个微信用户的不同小程序之间，以及不同用户之间，无法互相访问对方的数据。
2. 数据存储形式：数据以键值对的形式存储，其中单个键允许存储的最大数据长度为1MB，所有数据加起来的存储空间上限为10MB。
3. 数据操作方法：可以使用wx.setStorage（或wx.setStorageSync）来设置或存储数据，使用wx.getStorage（或wx.getStorageSync）来获取数据，使用wx.clearStorage（或wx.clearStorageSync）来清理数据。
4. 异步与同步：wx.setStorage和wx.getStorage是异步的，它们不会阻塞程序的执行，而wx.setStorageSync和wx.getStorageSync是同步的，会直接返回结果。
5. 插件隔离策略：如果一个小程序使用了多个插件，这些插件之间的storage是不互通的，插件与小程序本身的storage也是隔离的。

微信小程序的storage缓存提供了一种方便的数据存储方式，但需要注意其存储限制和隔离策略，以确保数据的正确使用和管理。

---

 

游览器（web）中使用storage 本地存储

前端必定会用到的存储技术：localStorage、sessionStorage

localStorage.setItem("key","value")

localStorage.getItem("key")

微信小程序中使用storage 本地存储

wx.setStorageSync("key", "value"); 

wx.getStorageSync("key");

 注意点

在web端使用：不管存入的是什么类型的数据，最终都会先调用以下 toString(),把数据变成了字符串 再存入进去

在小程序端使用：不存在类型转换的这个操作，存什么类似的数据进去，获取的时候就是什么类型 

---

两者对比

游览器中的storage和微信小程序中的storage都是用于在客户端存储数据的解决方案，但它们在API方法、类型转换以及存储限制这些方面存在差异。具体分析如下：

1. API方法：浏览器中的localStorage是通过localStorage.setItem(key, value)进行设置，通过localStorage.getItem(key)来获取数据。而在微信小程序中，可以使用同步的wx.setStorageSync(key, value)和wx.getStorageSync(key)，也可以使用异步的wx.setStorage(Object)和wx.getStorage(Object)来进行数据的存取。
2. 类型转换：在web端，不论存入的数据是什么类型，localStorage都会将其转换成字符串再存储。微信小程序的storage不存在这样的类型转换操作，存入的是什么数据类型，读取时就是什么数据类型。
3. 存储限制：微信小程序的单个键允许的最大数据长度为1MB，所有数据加起来的存储空间上限为10MB。而web端localStorage的大小限制取决于浏览器的实现，通常比小程序的10MB要大。

总的来说，虽然游览器和小程序的storage都提供了客户端存储解决方案，但在API方法等方面有所区别，开发者在实际使用时应根据需求和平台特性选择合适的存储方式。

 

---

 博主 [DTcode7] 带您 溺亖在知识的海洋里，嘿嘿嘿.~
🐒 个人主页—— DTcode7 的博客🐒

《微信小程序相关博客》
《Vue相关博客》
《前端开发习惯与小技巧相关博客》
《AIGC相关博客》

《photoshop相关博客》
😚 吾辈才疏学浅，摹写之作，恐有瑕疵。望诸君海涵赐教。望轻喷，嘤嘤嘤 🙈
🕍 愿斯文对汝有所裨益，纵其简陋未及渊博，亦足以略尽绵薄之力。倘若尚存阙漏，敬请不吝斧正，俾便精进！