本地存储。

浏览器本地存储：sessionStorage与localStorage的区别与应用场景
最新推荐文章于 2025-03-06 17:51:29 发布
原创 最新推荐文章于 2025-03-06 17:51:29 发布 · 237 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

本地存储特性

1、数据存储在用户浏览器中

2、设置、读取方便、甚至页面刷新不丢失数据

3、容量较大，sessionStorage 约5m、localStorage 约20m

4、只能存储字符串，可以将JSON.stringify()编码后存储

一、window.sessionStorage

1、生命周期为关闭浏览器窗口

2、在同一个窗口（页面）下数据可以共享

3、以键值对的形式存储使用

二、window.localStorage

生命周期永久生效，除非手动删除 否则关闭页面也会存在

可以多窗口（页面）共享（同一浏览器可以共享）

以键值对的形式存储使用

记住用户名案例

js中数据的保存
weixin_44746630的博客
06-07 643
1. JavaScript 的内存模型 function foo(){ var a = "极客时间" var b = a var c = {name:"极客时间"} var d = c } foo() 2.js为什么要用栈和堆内存空间两个表示数据？ 这是因为 JavaScript 引擎需要用栈来维护程序执行期间上下文的状态，如果栈空间大了话，所有的数据都存放在栈空间里面，那么会影响到上下文切换的效率，进而又影响到整个程序的执行效率。 通常情况下，栈空间都不会设置太大，
浏览器原理---浏览器本地存储
sinat_34896766的博客
04-30 1692
Cookie是最早被提出来的本地存储方式，在此之前，服务端是无法判断网络中的两个请求是否是同一用户发起的，为解决这个问题，Cookie就出现了。SessionStorage和LocalStorage都是在HTML5才提出来的存储方案，SessionStorage 主要用于临时保存同一窗口(或标签页)的数据，刷新页面时不会删除，关闭窗口或标签页之后将会删除这些数据。LocalStorage是HTML5新引入的特性，由于有的时候我们存储的信息较大，Cookie就不能满足我们的需求。b、Cookie无法跨域。
使用JS保存数据
06-02
在IE浏览器中点击demo1.html，将数据保存到txt中 在IE浏览器中点击demo2.html，将数据保存到Excel中
使用JS将内存中的数据保存到文件中
04-18
在IE浏览器下，运行该程序，在文本框中编辑文字，点击保存按钮，可以将文本框中的内容保存到文件中。
js的一些数据存储方式
mocoll的博客
08-21 2699
一、本地存储 随着.互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据, HTML 5规范提出了相关解决方案。 本地存储特性 1、数据存储在用户浏览器中。 2、设置、读取方便、甚至页面刷新不失数据。 3、容量较大, sessionStorage约5M、localStorage约20M。 4、只能存储字符串,可以将对象JSON.stringify0编码后存储。 二、window.sessionStorage 1、生命周期为关闭浏览器窗口。 2
js如何存储数据
鸭梨的博客
03-06 866
临时数据：使用变量、对象或数组。持久化数据：使用或Cookies。大量结构化数据：使用IndexedDB。服务器端存储：通过AJAX或Fetch API将数据发送到服务器。根据具体需求选择合适的存储方式。
精选资源
Cloudreve云盘源码，支持本地储存和对接各大对象储存
11-01
loudreve云盘源码，支持本地储存和对接各大对象储存,界面 美观 测试环境:PHP7.1 + MYSQL5.6 + Apache 上传源码到根目录 安装程序: 浏览器数据 http://localhost/CloudreveInstallerlocalhost更换成你的网 址 安装...
精选资源
原生JS实现购物车本地存储
08-18
利用原生js和本地存储技术实现购物车功能
HTML5 本地存储实现购物车功能
09-28
其次，本地存储的数据不安全，任何可以访问用户浏览器的人都可以看到存储的信息，所以敏感数据应避免使用此方式存储。最后，考虑到跨域安全性和隐私政策，开发者需要谨慎使用`localStorage`，并确保其符合相关的规范...
5个HTML5的常用本地存储方式详解与介绍
10-15
HTML5提供了一些全新的本地存储解决方案，它们是Web开发中非常重要的技术，可以用来存储用户的私有数据，包括数据和资源，以提升用户体验。在HTML5标准之前，主要的存储方式是通过cookies来实现的，但这种方法有一些...
storage与cookie的相同点和区别
smile的博客
01-25 3951
共同点：都是保存在浏览器端，且同源的。 区别： cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。 而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。 cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。 存储大小限制也不同，cookie数据不能超过4k，
JavaScript到底如何存储数据?
m0_45953836的博客
03-21 3264
普遍的观点：JavaScript中的基本数据类型是保存在栈空间，而引用数据类型则是保存在堆空间里, 是否正确？让我们一起来探索
JS数据存储
weixin_45982458的博客
02-05 180
原始数据，将数据保存在栈内存中 引用类型，将数据保存在堆内存中，然后自动生成16进制地址，然后将地址保存在栈内存中 即使两个对象的属性名称和属性值完全一样，这两个对象也不相等 引用类型的数据，如果没有被任何地址所指向就会自动销毁 null 空地址 没有指向任何堆内存中的数据 ...
js 数据存储
lifangfang0607的博客
10-26 214
1.Cookie HTTP Cookie，通常直接叫做Cookie，最初在客户端用于存储会话信息的。 需要制定作用域，不可以跨域访问； 无法保存太大的数据（最大仅为4KB）； 本地保存的数据会发送给服务器，浪费带宽 ； 2.sessionStorage 用于本地存储一个会话（session）中的数据，关闭窗口后，sessionStorage即被销毁，除了协议、主机名、端口外，还要求在同一窗口（也就...
js中基本数据存储
weixin_50498637的博客
04-16 1756
本地存储 随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。 1、数据存储在用户浏览器中 2、设置、读取方便、甚至页面刷新不丢失数据 3、容量较大，sessionStorage和localStorage约 5M 左右 localStorage 生命周期永久生效，除非手动删除 否则关闭页面也会存在 可以多窗口（页面）共享（同一浏览器可以共享） 以键值对的形式存储使用 存储数据 localStorage.
js中的存储
QQ1257871322的博客
10-23 970
在 JavaScript 中，存储主要指的是用于在客户端保存数据的几种方式。这些存储方式各有特点，开发者可以根据应用的需求选择合适的存储方案。经过我粗略查看好像发现没有讲过存储，所以先大概的讲一下。
js 存储数据
weixin_44944193的博客
11-07 9223
使用本地存储，A页面需要将变量值存储在本地，B页面去本地读取数据，就可以使用这个变量。 当A页面与B页面之间没有直接的跳转关系时，使用url传参的方式，就不是很好用了。这种情况下，可以采用本地存储的方式。 cookie的使用在另一篇博客中有详细的介绍，附上链接：前端开发中的cookie使用总结。 localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后...
JS基础知识一：数据存储
GTbond的博客
12-16 342
数据存储 1.简单类型存储在栈stack 2.复杂类型在栈中存储一个地址，指向堆中具体实例 示例： function fn(){ let a = 1; let b = 2; let c = { name : "胡歌" } } a,b都存放在栈(stack)中，c在栈中只有一个地址，指向堆中 内存泄漏 当函数fn()执行完毕之后，三个变量消失，栈清空内存，堆中的那个对象实例继续存在，直到系统的垃圾清理机制（garbage collector）将这块内存回收。因此，一般来说，内存泄漏都发
本地储存
最新发布
04-28
### 本地存储技术的概念与实现 #### 什么是本地存储？ 本地存储是一种允许Web应用程序在用户的设备上保存数据的技术。它提供了比传统Cookie更强大、灵活的功能，能够持久化存储大量数据而不影响页面性能[^1]。 #### 主要的本地存储方式 目前主流的前端框架和技术栈支持多种本地存储方案，其中包括但不限于： - **LocalStorage**: 提供了一种简单的键值对存储机制，适合长期存储少量数据。它的特点是即使浏览器关闭后仍然保留数据，直到手动清除为止。 - **SessionStorage**: 类似于LocalStorage，但它仅限于当前会话期间有效；一旦窗口或标签页被关闭，则该存储中的数据会被销毁。 - **IndexedDB**: 是一种更为复杂的客户端数据库解决方案，适用于需要处理更大规模结构化数据的应用场景。 对于UniApp开发环境而言，主要依赖`localStorage`以及其封装后的API来完成基本的数据操作需求[^1]。 #### 实现数据存储的方法 以下是基于JavaScript语法，在UniApp项目里利用LocalStorage进行简单数据写入读取的例子: ```javascript // 存储单条记录到 localStorage 中 function saveData(key, value){ uni.setStorageSync(key,value); } // 获取指定 key 对应的内容 function getData(key){ return uni.getStorageSync(key); } ``` 上述代码片段展示了如何定义两个函数分别用于向LocalStorage添加新项(`saveData`) 和检索已存在的项 (`getData`) 。这里采用了同步版本的操作接口 `setStorageSync()` 及 `getStorageSync()`, 它们可以直接返回结果而无需等待回调执行完毕[^1]. 需要注意的是，尽管这些方法非常方便易用，但由于它们存在一定的局限性——比如容量上限较低(通常为5MB)，所以当面对较大数据量或者复杂查询逻辑时可能显得力不从心。此时可以考虑采用其他高级别的替代品如 IndexedDB 或者 SQLite 插件等扩展功能更强的选择[^1]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值