使用localStorage进行页面间传值

于 2021-12-27 22:18:27 发布
阅读量986 收藏 4
点赞数
分类专栏： 前端零零散散 文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/http____/article/details/122181860
版权
本文介绍了如何通过JavaScript的localStorage特性，在不同的HTML页面之间传递参数。在A页面中存储数据，然后在B页面加载时读取这些数据，实现页面间的通信。
摘要由CSDN通过智能技术生成

A页面：

<!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>页面之间传值——localStorage方法</title>
</head>

<body>
    <div id="app">

        <h1>利用HTML5 Web 存储 localStorage</h1>

        <form>
            <div> 昵称：<span>{
  {userInfo.nickname}}</span></div>
            <div> 电话：<span
最低0.47元/天 解锁文章
不知-_
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
使用localStorage进行页面间通信
izwell的博客
03-11 1204
在h5中，新增了localStorage，对应localStorage的有一个storage事件，这个事件可以用来进行页面间进行通信。 页面间通信的列子 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;A&lt;/title&a
HTML5 使用 sessionStorage 进行页面传值的方法
12-14
HTML5 提供的本地存储功能，使得web应用可以将数据存储在用户的本地浏览器。在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。 在客户端存储的方法有两种： 1. localStorage: 没有时间限制的存储，而且容量大，至少5M大小；所有相同域名的页面都可以存储和获取相同的数据。 2. sessionStorage: 针对一个session的数据存储，该tab关掉就会消失。 目前大部分浏览器都已经很好地支持了 HTML5 ，但了为安全，使用前还是应该做客户端检测： if (typeof(Storage)
localStorage页面传值
fan1321923530的博客
08-27 646
1.在需要传值页面储存 //对象 let numberarr = { num1: 1, num2: 2, num3: 3 }; //字符串 let str = 'heoll'; localStorage.setItem('numberarr ', JSON.stringify(numberarr )); localStorage.setItem('str', str); 2.在另一页面获...
js之使用localStorage进行页面间传值
ywyngq的博客
05-08 699
localStorage是用来作为本地存储来使用的，是html5新加的一个特性。可以用来进行页面间值的传递。 当使用localStorage传递单个值时用法如下： // 存储值 localStorage.setItem("test","test"); // 获取值 var test= localStorage.getItem("test"); 当使用localStorage传递对象时，稍有...
用localStorage在页面间传值
weixin_45932157的博客
02-15 370
注意：要在同一域名下的页面才有效 在需要存储数据页面用localStorage设置数据 //存取数据 localStorage.setItem(key,value);//key要用单引号或者双引号包括着，value就是你要存的数据 在需要引用数据的页面用localStorage获取数据 //取出数据 var name=localStorage.getItem(key);//key要用单引号或者双引...
原生JS如何使用localstorage进行页面之间的传值
05-25
使用LocalStorage进行页面之间的传值，可以分为以下几个步骤： 1. 在发送页面（发送数据的页面）中使用`localStorage.setItem()`方法将需要传递的数据存储到LocalStorage中，例如： ```javascript localStorage....
localstorage跨页面传值
最新发布
07-27
以下是使用`localStorage`进行跨页面传值的示例代码： 在页面A中，将值存储到`localStorage`中： ```javascript // 存储值到localStorage localStorage.setItem('key', 'value'); ``` 在页面B中，获取存储的值： `...
如何使用localstorage代替cookie实现跨域共享数据问题
01-19
一，背景   因为网站系统的日益庞大，不同域名业务，甚至不同合作方网站的cookie可能或多或少需要进行共享使用，遇到这个情况的时候，大家一般想到的是使用登录中心分发cookie状态再进行同步进行解决，成本较高而且实施起来比较复杂和麻烦。 因为cookie在跨域的情况下，浏览器根本不允许互相访问的限制，为了突破这个限制，所以有了以下这个实现方案，使用postmessage和localstorage进行数据跨域共享。 原理比较简单，但是遇到的坑也不少，这里梳理一下，做个备份。 二，API设计 背景中说过我们使用localstorage来代替cookie，本身localstorage和cookie
html页面互相传值的问题解决方案
09-28
对于更复杂或更安全的需求，可以考虑使用POST请求、cookies、localStorage、sessionStorage或者服务器端的session等方法进行页面间的数据传递。POST请求可以隐藏数据，但需要配合服务器端处理；cookies、...
js利用localStorage实现页面之间的传值
鲁小班的博客
06-05 2063
今天接到一个需求，点击按钮，将当前页面中的某一块div里的所有内容，提取出来在一个新的浏览器页面中打开，原本想到了新建一个页面，然后利用url传参，发现比较麻烦，所以改用了localStorage存储点击之后，获取div的所有节点，并存储起来，再在跳转到的那个页面中获取存储的内容 准备过程：新建页面a和页面b a页面代码： <!DOCTYPE html> <html&...
两个页面之间传值：localStorage缓存设置值
qq_36833673的博客
06-21 1719
在平常的开发工作中，可能经常需要进行两个页面之间的传值，可以用session、url、localStorage等。今天，写下通过localStorage设置值，进行两个页面之间传值。 1：设置key、value： window.localStorage.setItem("flag","test")； 2：取值： String flag =window.localStorage.getItem("flag")； 3：删除值： window.localStorage.removeItem("...
JS web localStorage传值 coolie传值
weixin_30483013的博客
01-14 96
localStorage传值<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=...
window.localStorage.setItem的理解与使用
热门推荐
taylorzun的博客
07-19 4万+
最近接触的一个小项目中频繁看到一个新的面孔： changeTheme () { dispatch({ type: 'app/switchTheme' }) }, changeOpenKeys (openKeys) { window.localStorage.setItem(`${prefix}navOpenKeys`, JSON.stringify(o...
localStorage 传值使用总结
汉堡请不要欺负面条
01-22 1781
一、什么是localStorage、sessionStorage 在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。 二、localStorage
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不知-_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值