浏览器的本地存储

最新推荐文章于 2024-05-19 14:15:00 发布
最新推荐文章于 2024-05-19 14:15:00 发布
阅读量1.5k 收藏 4
点赞数 3
分类专栏： 前端 浏览器 文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44875230/article/details/122903388
版权
本文介绍了浏览器的本地存储，包括localStorage和sessionStorage，详细阐述了它们的特性，如以键值对存储数据，存储限制及生存周期。并提供了查看和使用本地存储的方法，特别是如何在JavaScript中操作本地存储的示例。
摘要由CSDN通过智能技术生成

文章目录

本地存储及其特性

本地存储

本地存储就是将数据存储在本地浏览器中，这样就方便了数据的读取。浏览器的window对象身上有两个属性——localStorage和sessionStorage，我们可以利用它们进行本地存储的操作。

本地存储的特性

  1. 以键值对的形式进行存储
  2. 只能存储字符串
  3. 存储的容量有限
  4. 由sessionStorage保存的数据，关闭浏览器后就会被删除
  5. 由localStorage保存的数据，关闭浏览器后不会被删除

注：如果想在本地存储中存储对象，则需要将对象JSON.stringify()后就可以存储为字符串


查看本地存储

此处以谷歌浏览器为例

  1. 在浏览器窗口按下ctrl+shift+c，即可打开浏览器的调试窗口
  2. 选中调试窗口中Application项，找到Storage选项，即可看到Local Storage和Session Storage

在这里插入图片描述


使用本地存储

本地存储的四个 Web API(方法)

在这里插入图片描述

代码示例（以sessionStorage为例）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>sessionStorage</title>
最低0.47元/天 解锁文章
Penroseblog
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
10-19
cookie，localStorage和sessionStorage都是浏览器本地存储数据的地方,其用法不尽相同，今天小编通过本文给大家分享jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法，需要的朋友参考下吧
browser-local-storage:浏览器中用于localStorage的Node.js样式包装器
05-22
浏览器 browser-ls在浏览器的localStorage API上提供了一个不错的类似于节点的包装器。 它可以为您处理潜在的localStorage异常，而且压缩后只有3KB！ 它通过try catch块在内部处理异常，并将使用第一个回调参数作为错误参数的Node.js方式返回错误。 这意味着它可以与浏览器支持的其他Node.js模块（如Async.js）很好地配合使用。 安装 通过NPM： npm i browser-ls 通过鲍尔 bower i browser-ls 您也可以将dist /文件夹中的文件拖放到您的项目中。 例子 var ls = require ( 'browser-ls' ) ; // If you're not Browserify-ing you can use: // var ls = window.ls ; // instead of "r
浏览器本地存储方案
最新发布
Runnymmede的博客
05-19 817
浏览器本地存储方案可以分为三个方面，分别为CookieIndexedDB。
浏览器本地存储
薛定谔的猫
03-22 590
存储内容大小一般支持5MB左右（不同浏览器可能还不一样）* 浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。* 相关API：``该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。``该方法接受一个键名作为参数，返回键名对应的值。``该方法接受一个键名作为参数，并把该键名从存储中删除。该方法会清空存储中的所有数据。* 备注：
js浏览器本地存储store.js介绍及应用
10-25
store.js 是一个兼容所有浏览器的 LocalStorage 包装器，不需要借助 Cookie 或者 Flash。store.js 即可实现本地存储功能
BrowserStorage浏览器本地存储封装
08-12
BrowserStorage是针对HTML5引入的各种浏览器本地存储机制的一种封装库，旨在提供统一的API接口，以便开发者更加便捷地管理和操作这些存储方式。HTML5的本地存储主要包括Cookie、localStorage和sessionStorage，它们...
web基于浏览器的本地存储方法应用
09-05
因此，浏览器开始引入新的本地存储方法，以满足更丰富的数据存储需求。 HTML5引入了两种主要的本地存储解决方案：`localStorage` 和 `sessionStorage`。`localStorage` 是一种持久化的存储方式，数据可以在用户关闭...
浏览器的本地存储（localStorage、sessionStorage）
Serena_tz的博客
05-09 739
localStorage 存一个数据。 储存的都是字符串。 将对象修饰一下，让我们能看到对象的内容。JSON.stringify。 读取一个数据。 移除一个数据。 清空所有的数据。 自己删除，或者清除缓存的时候就不会存在。 sessionStorage 关闭浏览器重新打开以后就会没有。 总结 ...
浏览器本地存储（cookie、sessionStorage和localStorage）
小白目的博客
03-25 3226
1、Cookie 特点：存储大小4KB左右；可设置失效时间；通信时会携带在HTTP头中，使用cookie保存过多数据会影响性能。 注意：cookie的跨域可以理解为跨域名，只要二级域名相同，不涉及到端口，数据就是共享的。 实用场景：Cookie和session结合使用，通信时后端生成sessionId存储到Cookie中，用户每次请求都会携带这个sessionId，这样服务端就知道是谁发起的请求，从而响应相应的信息。(可能受到csrf攻击) 【session 依赖于cookie实现存储在服务端，不同
js查看浏览器本地存储
07-28
你可以使用JavaScript的`localStorage`对象来查看浏览器的本地存储。`localStorage`提供了一种简单的键值对存储方式，可以在浏览器的会话期间持久化保存数据。 要查看本地存储中的数据，你可以使用以下代码： ```javascript // 检查本地存储是否可用 if (typeof(Storage) !== "undefined") { // 获取所有的键 for (var key in localStorage) { console.log(key + ": " + localStorage.getItem(key)); } } else { console.log("抱歉，您的浏览器不支持本地存储。"); } ``` 这段代码首先检查浏览器是否支持本地存储，然后通过`localStorage`对象获取所有键，并使用`getItem()`方法获取对应键的值。最后，它会在控制台打印出每个键值对。 请注意，`localStorage`中存储的数据只能是字符串类型，如果要存储其他类型的数据，你可能需要使用`JSON.stringify()`和`JSON.parse()`方法进行序列化和反序列化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值