WebAPI第六天学习总结——本地存储 (sessionStorage、localStorage)

最新推荐文章于 2022-11-03 09:42:42 发布
最新推荐文章于 2022-11-03 09:42:42 发布
阅读量130 收藏
点赞数
分类专栏： WebAPI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52819925/article/details/119792303
版权
本文总结了WebAPI中关于本地存储的使用，主要探讨了sessionStorage和localStorage的存储方式、生命周期以及它们的区别。sessionStorage数据在浏览器窗口关闭后失效，而localStorage的数据会永久保存，即使关闭浏览器也会存在。两者都能以键值对形式存储数据，但localStorage可在多个窗口间共享，而sessionStorage仅限于单个页面。
摘要由CSDN通过智能技术生成

window.sessionStorage

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

  • 在同一个窗口(页面)下数据可以共享

  • 以键值对的形式存储使用

存储数据：

sessionStorage.setItem(key, value)

获取数据：

sessionStorage.getItem(key)

删除数据：

sessionStorage.removeItem(key)

清空数据：(所有都清除掉)

sessionStorage.clear()

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text">
    <button class="set">存储数据</button>
    <button
最低0.47元/天 解锁文章
李穩钰
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
KVStorage:基于WebApi的键值对存储
04-12
KV存储 Conchbrain俱乐部官方KV存储 基于WebApi的键值对存储
WebApi入门第十章（本地存储 localstorage与sessionstorage）
m0_56344602的博客
08-22 289
1.localstorage 1.localStorage:本地存储 将数据存储到浏览器 2.语法 存： localStorage.setItem('属性名','属性值') 取： localStorage.getItem('属性名') 删： localStorage.removeItem('属性名') 清空： localStorage.clear() 3.注意点 a.存储的数据只能是字符串类型。如果是其他数据类型则会自动调用toString()方法转成字符串 b.永久存储。除非自己删，否
使用Web存储API存取本地数据
weixin_34198881的博客
04-07 530
使用Web存储API TODO:本文由 赤石俊哉 翻译整理，您可以将本文自由地用于学习交流。如需用于其他用途请征得作者的同意。 原文链接：Using the Web Storage API - Mozilla Developer Network (英文) Web存储API提供了浏览器可以在本地安全存储键值对的一个机能，它比cookies...
WebAPIs-06 (window中的常见对象方法/localstorage与sessionstorage)
FellAsleep的博客
12-19 389
1.window对象介绍：( 当前浏览器窗口) 1.window是js中的顶级对象 ： 所有的全局函数、全局对象都是window对象的方法 例如 document 、 alert() 、 setInterval() 、setTimeout() 等等 2.window对象的成员(属性+方法),使用时都可以省略window 3.window对象有一个特殊的属性叫做top, 指向window对象本身。 细节： top这个变量名是无法被覆盖的，就算你自己声明top，它还是指向window. * 所以我们声明变量的时
HTML5——Web存储API，sessionStorage和localStorage
叶落无痕的个人主页
10-19 784
Web存储API，sessionStorage和localStorage
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
10-19
在Web开发中，数据存储是不可或缺的一部分，jQuery提供了一些便捷的方法来访问和操作浏览器的本地存储，包括cookie、localStorage和sessionStorage。这三个机制都用于在客户端存储数据，但它们各有特点和适用场景。 ...
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
10-14
- `sessionStorage` 和 `localStorage` 都属于Web Storage API，它们的主要区别在于数据的有效期：`sessionStorage`只存在于当前会话，而`localStorage`数据持久化。 - `cookie` 与前两者相比，不仅可用于存储数据，...
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
09-28
HTML5的本地存储功能主要由两个API提供：localStorage和sessionStorage。它们允许Web应用程序在用户的浏览器上持久存储数据，而不依赖于服务器或Cookie。这两者的主要区别在于数据的生命周期：localStorage的数据...
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
09-28
主要包括localStorage、sessionStorage和Web SQL Database（一种本地数据库）。接下来详细讲解每种存储方式以及如何使用它们。 ### localStorage localStorage是HTML5 Web Storage的一部分，它提供了一个可以在...
【前端知识点总结】WebAPI BOM & localStorage
jiang_ziY的博客
03-04 378
本章内容包含： 1、window对象，2、location对象，3、history对象，4、navigator对象，5、localStorage与sessionStorage
WebAPI第六天学习总结—— 本地存储案例-记住用户名
weixin_52819925的博客
08-20 209
案例：记住用户名 注意：如果勾选记住用户名， 下次用户打开浏览器，就在文本框里面自动显示上次登录的用户名 案例分析 把数据存起来，用到本地存储 关闭页面，也可以显示用户名，所以用到localStorage 打开页面，先判断是否有这个用户名，如果有，就在表单里面显示用户名，并且勾选复选框 当复选框发生改变的时候change事件 如果勾选，就存储，否则就移除 示例代码： <!DOCTYPE html> <html lang="en"> <head>
WebApi 学习记录
weixin_59992366的博客
12-06 682
WebApi的学习路线与详细内容
C#WebApi同时上传数据和图片并通过SqlSugar存放到数据库
Vaccae的博客
08-29 1855
前言最近项目中要做一些图片的存放功能，网上找了找WebApi的文件上传存放，用的挺多的是HttpPostedFileBase的方式，不过我希望是图片和数据都同时通过一个POST上传上来，...
原来是这样的 window.open
夏狗花花的博客
11-03 813
window.open 打开相同 origion 的页面时的一些特性。
关于webapi获取登陆用户信息
图纸的博客
07-11 3715
先是用户登陆，将用户信息用guid对应存储再session中 var dsfs = Guid.NewGuid().ToString(); HttpContext.Current.Session[dsfs] = ss; 然后将数据返回到客户端，客户端存储在cookie中 function setCookie(cname, cvalue, exdays) { var d = new Date();...
本地数据存储 localStorage sessionStorage
最新发布
06-01
在 Web 应用程序中，我们经常需要在浏览器中保存一些数据，以便在下一次访问应用程序时可以直接读取这些数据。为了实现这个功能，Web 浏览器提供了两种本地数据存储方式：`localStorage` 和 `sessionStorage`。 `localStorage` 和 `sessionStorage` 都是浏览器提供的 JavaScript API，可以用来在浏览器中保存和读取数据。它们的主要区别在于数据的生命周期和作用域。 `localStorage` 中保存的数据是永久性的，除非用户手动清除，否则数据将一直保存在浏览器中。而 `sessionStorage` 中保存的数据只在当前会话中有效，当用户关闭浏览器窗口或标签页时，数据将被删除。 另外，`localStorage` 中保存的数据可以在不同的窗口或标签页中共享，而 `sessionStorage` 中保存的数据只能在同一个窗口或标签页中共享。 在 JavaScript 中，我们可以使用以下代码来读取和保存数据到本地存储中： ``` // 保存数据到 localStorage 中 localStorage.setItem('key', 'value') // 从 localStorage 中读取数据 const value = localStorage.getItem('key') // 从 localStorage 中删除数据 localStorage.removeItem('key') // 清空 localStorage 中的所有数据 localStorage.clear() ``` 类似地，我们可以使用 `sessionStorage` 来读取和保存数据： ``` // 保存数据到 sessionStorage 中 sessionStorage.setItem('key', 'value') // 从 sessionStorage 中读取数据 const value = sessionStorage.getItem('key') // 从 sessionStorage 中删除数据 sessionStorage.removeItem('key') // 清空 sessionStorage 中的所有数据 sessionStorage.clear() ``` 需要注意的是，`localStorage` 和 `sessionStorage` 中只能保存字符串类型的数据，如果需要保存其他类型的数据，需要先将其转换为字符串类型。例如，我们可以使用 `JSON.stringify` 方法将 JavaScript 对象转换为字符串，然后再保存到本地存储中。在读取数据时，需要使用 `JSON.parse` 方法将字符串转换为 JavaScript 对象。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值