服务器之家:专注于VPS、云服务器配置技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - js教程 - JavaScript 中的本地存储与会话存储

JavaScript 中的本地存储与会话存储

2023-05-08 16:00科技狠活与软件技术 js教程

让我们深入探讨 JavaScript 中的两种基本 Web 存储机制:本地存储和会话存储。这两种机制对于使用数据持久性创建个性化用户体验非常重要。它们都以服务器无法读取的方式将数据存储在用户浏览器中。我们将深入研究两者,解释其

让我们深入探讨 JavaScript 中的两种基本 Web 存储机制:本地存储和会话存储。这两种机制对于使用数据持久性创建个性化用户体验非常重要。它们都以服务器无法读取的方式将数据存储在用户浏览器中。我们将深入研究两者,解释其用例以及它们之间的区别。

先决条件

  1. javascript的应用知识
  2. 网络浏览器的应用知识

让我们开始吧

什么是本地存储?

本地存储将键值对存储在用户的浏览器中。即使在用户关闭浏览器或关闭设备后,这些存储的数据也会保留。用户可以手动清除浏览器缓存或直到应用程序清除数据,才能清除此数据。它有大约 5MB 的存储容量,比 cookie 可以存储的要大。

本地存储非常适合存储将在您的应用程序中经常访问的全局数据,例如用户名、电子邮件、姓名等。它也非常适合记住我这样的功能,可以通过跳过用户已经完成的步骤来帮助简化用户体验之前输入。

什么是会话存储?

与本地存储类似,会话存储也在用户的浏览器中存储键值对。事实上,它们都是 Web 存储 API 的一部分,不同之处在于它们的数据处理方式不同。它不是为多个会话保留数据,而是仅在其用户的特定会话期间可用。这意味着当用户关闭其浏览器或选项卡时,数据将被清除。这非常适合多步骤流程,例如预订航班和酒店、购物车和用户身份验证。

本地存储与会话存储

让我们比较一下两者。您知道他们在数据持久化方面存在差异。它们还有哪些不同之处?首先,适用范围不同。本地存储在所有选项卡和窗口中具有全局范围,而会话存储仅限于其单个选项卡或窗口。本地存储还具有更大的容量,这是有道理的,因为它可以在多个选项卡和窗口之间保存数据。

如果使用不当,这甚至可能会对性能产生影响。考虑到它的大尺寸,如果使用不当,它可能会降低您的应用程序的速度,但是,这并没有太大的不同。最重要的是选择最适合您应用程序特定用例的场景。是否应该为多个会话保留数据?使用本地存储。如果不是,请考虑会话存储。

下一步

您如何使用本地或会话存储来个性化您的应用程序的用户体验?去深入了解一下吧!您甚至可以通过查看如下所示的开发工具中的“应用程序”选项卡来查看应用程序如何执行此操作

JavaScript 中的本地存储与会话存储

您以前使用过本地或会话存储吗?您在哪些用例中使用过它们?您正在考虑哪些用例?

原文地址:https://www.toutiao.com/article/7230617142176367163/

延伸 · 阅读

精彩推荐
  • js教程JavaScript实现前端网页版倒计时

    JavaScript实现前端网页版倒计时

    这篇文章主要为大家详细介绍了JavaScript实现前端网页版倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    小 菜5992022-02-20
  • js教程详解requestAnimationFrame和setInterval该如何选择

    详解requestAnimationFrame和setInterval该如何选择

    这篇文章主要为大家介绍了requestAnimationFrame和setInterval该如何选择示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升...

    forrest酱7802023-04-03
  • js教程js加减乘除精确运算方法实例代码

    js加减乘除精确运算方法实例代码

    这篇文章主要给大家介绍了关于js加减乘除精确运算方法的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值...

    ``木头人```8722022-01-04
  • js教程JavaScript实现页面高亮操作提示和蒙板

    JavaScript实现页面高亮操作提示和蒙板

    这篇文章主要介绍了JavaScript实现页面高亮操作提示和蒙板,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    stones4zd6012021-12-24
  • js教程微信小程序实现可拖动悬浮图标(包括按钮角标的实现)

    微信小程序实现可拖动悬浮图标(包括按钮角标的实现)

    这篇文章主要介绍了微信小程序实现可拖动悬浮图标(包括按钮角标的实现),本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考...

    юноша7772021-12-21
  • js教程原生js实现九宫格拖拽换位

    原生js实现九宫格拖拽换位

    这篇文章主要为大家详细介绍了原生js实现九宫格拖拽换位,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    _小木不是木_12242022-01-07
  • js教程JS+CSS实现过渡特效

    JS+CSS实现过渡特效

    这篇文章主要为大家详细介绍了JS+CSS实现过渡特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    Dr_空山3712021-12-23
  • js教程微信小程序实现购物车小功能

    微信小程序实现购物车小功能

    这篇文章主要为大家详细介绍了微信小程序实现购物车小功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    小王同学Max5752021-12-22