修改页面值获取数据存到localStorage在赋值

最新推荐文章于 2023-02-25 16:22:56 发布
最新推荐文章于 2023-02-25 16:22:56 发布
阅读量227 收藏
点赞数
文章标签： 前端 Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62852343/article/details/128625758
版权

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<meta charset="utf-8" />

<title>excel demo</title>

<script src="" target="_blank">https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>

<style>

</style>

<script type="text/javascript">

let a = {}

let b = {}

let c = {}

let d = {}

let e = {}

let f = {}

function box1Function() {

const inputBox = document.querySelectorAll('.box1')[0]

// 获取input输入框中的值

let inputVal = inputBox.value;

if (inputVal) {

a = inputVal;

// console.log(a);

// 把值存到localStorage

window.localStorage.setItem('a', JSON.stringify(a))

// var b = JSON.parse(window.localStorage.getItem('ax'))

// console.log(b);

} else {

alert('请在input输入框中填点东西');

}

}

// 获取localStorage里面的值

var a1 = JSON.parse(window.localStorage.getItem('a'))

if (a1 == null) {

document.write('<textarea οnchange="box1Function()" class="input-box box1" >4、xxxxxxxx。</textarea>')

} else {

document.write('<textarea οnchange="box1Function()" class="input-box box1" >' + a1 + '</textarea>')

}

$("#ltx_2").append($('.box1'));

function box2Function() {

const inputBox = document.querySelectorAll('.box2')[0]

// 获取input输入框中的值

let inputVal = inputBox.value;

if (inputVal) {

b = inputVal;

// console.log(b);

window.localStorage.setItem('b', JSON.stringify(b))

} else {

alert('请在input输入框中填点东西');

}

}

var b1 = JSON.parse(window.localStorage.getItem('b'))

if (b1 == null) {

document.write('<textarea οnchange="box2Function()" class="input-box box2" >5、xxxxx</textarea>')

} else {

document.write('<textarea οnchange="box2Function()" class="input-box box2" >' + b1 + '</textarea>')

}

$("#ltx_2").append($('.box2'));

function box5Function() {

const inputBox = document.querySelectorAll('.box5')[0]

// 获取input输入框中的值

let inputVal = inputBox.value;

if (inputVal) {

e = inputVal;

// console.log(b);

window.localStorage.setItem('e', JSON.stringify(e))

} else {

alert('请在input输入框中填点东西');

}

}

var e1 = JSON.parse(window.localStorage.getItem('e'))

if (e1 == null) {

document.write('<textarea οnchange="box5Function()" class="input-box box5" >6、xxxxx</textarea>')

} else {

document.write('<textarea οnchange="box2Function()" class="input-box box5" >' + e1 + '</textarea>')

}

$("#ltx_2").append($('.box5'));

function box3Function() {

const inputBox = document.querySelectorAll('.box3')[0]

// 获取input输入框中的值

let inputVal = inputBox.value;

if (inputVal) {

c = inputVal;

// console.log(c);

window.localStorage.setItem('c', JSON.stringify(c))

} else {

alert('请在input输入框中填点东西');

}

}

var c1 = JSON.parse(window.localStorage.getItem('c'))

if (c1 == null) {

document.write('<textarea οnchange="box3Function()" class="input-box box3" >1、xxxx</textarea>')

} else {

document.write('<textarea οnchange="box3Function()" class="input-box box3" >' + c1 + '</textarea>')

}

$("#ltx_1").append($('.box3'));

function box4Function() {

const inputBox = document.querySelectorAll('.box4')[0]

// 获取input输入框中的值

let inputVal = inputBox.value;

if (inputVal) {

d = inputVal;

// console.log(a);

window.localStorage.setItem('d', JSON.stringify(d))

} else {

alert('请在input输入框中填点东西');

}

}

var d1 = JSON.parse(window.localStorage.getItem('d'))

// console.log(d1);

if (d1 == null) {

document.write('<textarea οnchange="box4Function()" class="input-box box4" >2、xxxxx</textarea>')

} else {

document.write('<textarea οnchange="box4Function()" class="input-box box4" >' + d1 + '</textarea>')

}

$("#ltx_1").append($('.box4'));

function box6Function() {

const inputBox = document.querySelectorAll('.box6')[0]

// 获取input输入框中的值

let inputVal = inputBox.value;

if (inputVal) {

f = inputVal;

window.localStorage.setItem('f', JSON.stringify(f))

} else {

alert('请在input输入框中填点东西');

}

}

var f1 = JSON.parse(window.localStorage.getItem('f'))

if (f1 == null) {

document.write('<textarea οnchange="box6Function()" class="input-box box6" >3、xxxxx</textarea>')

} else {

document.write('<textarea οnchange="box6Function()" class="input-box box6" >' + f1 + '</textarea>')

}

$("#ltx_1").append($('.box6'));

box2Function()

</script>

</head>

<body>

</body>

</html>

wangxiqing-z
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 数据更新，如何马上拿到页面变化后的数据？
weixin_47864628的博客
07-13 978
学习
ajax获取json layui_记一次layui 通过ajax异步获取数据修改页面表单
weixin_35779506的博客
01-26 1007
本次记录的是开发枫叶scrm时遇到的，问题是发现不同功能会有很多相同的调用，导致比较多的重复代码。于是开始看CI4的文档，着手尝试不同的编写方法。在后端新建一个控制器，单独作为api输出json数据；useCodeIgniter\API\ResponseTrait;//文档上是写到方法上面的，好像是不能用的useApp\Controllers\User\Spreaders;classCl...
获取页面数据的方法
m0_53127728的博客
07-31 617
本文中涉及前端和后端两种获取前一个页面数据的方法，分别使用session和地址栏传参的方法
javascript中 localStorage的具体用法
geqiandexiaoshiguang的博客
12-03 674
1.首先绑定浏览器是否支持localStorage； 2.给loacalStorage 赋值的三种方式 var storage=window.localStorage; //写入a字段 storage["a"]=1; //写入b字段 storage.b=2; //写入c字段 storage.setItem("c",3); console.log(typeof storage[...
LocalStorage传值的应用
qq_43513370的博客
02-25 253
前端页面之间的传值
Vue使用localStorage存储数据的方法
12-11
本文实例为大家分享了Vue使用localStorage存储数据的具体代码，供大家参考，具体内容如下 通过下面这个案例来了解localStorage的基本使用...1.localStorage只支持存字符串数据,保存先调用JSON.stringify转为字符串 2.
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
10-20
本文给大家分享一段js代码利用利用localStorage防止页面动态添加数据刷新后数据丢失问题，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下
JavaScript使用localStorage存储数据
10-16
主要为大家详细介绍了JavaScript使用localStorage存储数据，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JS18-LocalStorage:从LocalStorage获取数据。 从LocalStorage删除和更新项目
04-07
从LocalStorage获取数据。 从LocalStorage删除和更新项目 将项目添加到LocalStorage 当我进入亚马逊时，我可以将商品保存在购物车中，如果我两天后回去， 仍然会在购物车中，为此会使用LocalStorage LocalStorage...
localStorage和sessionStorage存取值的方法
qq_58340302的博客
05-02 2206
localStorage和sessionStorage都属于本地存储，他们的区别是： localStorage：永久存储，永远不会失效，除非手动清除 sessionStorage：临时存储，存储的数据只有在同一个会话中的页面才能访问到，并且当会话结束后，数据就立即消失了 存储数据的方法： localStorage： // 存储数据到localStorage localStorage.setItem('key', value) // 获取localStorage中的数据 localStorage
HTML5上localStorage键值赋值与更新兼容性探讨
肖永威的专栏
12-07 6282
去年年末上线的系统，有个非正常使用问题，困扰技术人员一年了。现象是这样的：在同一个终端IE浏览器上，使用不同帐号处理流程业务时，这是可能发生串帐号的问题，也就是说流程处理人不对了，而Chrome浏览器无此问题。
localStorage中8个用法
qq_31318983的博客
09-11 2656
webStorage是是HTML5新出的标签，是本地存储的解决方案之一，有localStorage和sessionStorage两种方法。 因而前端做数据存储，跨页面传值，localStorage是一个很好的方式，以键值对的方式存储，也方便取值赋值，下面说一说使用方法和一些常见的使用技巧。 1、设置值(存值)共有3种方式，localStorage相当于window对象下面的一个属性，所以有**[]...
localstorage使用方法
weixin_30426879的博客
08-09 593
现在前端做数据存储，跨页面传值，localStorage是一个很好的方式，以键值对的方式存储，也方便取值赋值，下面说一说使用方法和一些常见的使用技巧。 1.存值共有3种方式，localStorage相当于window对象下面的一个属性，所以有[]和.调用，但也具有自身的setItem方法 // 自身方法 localStorage.setItem("name","bonly"); // []方法 l...
localstorage用法及拓展
m0_61701551的博客
07-21 2930
localstorage用法及拓展sessionStorage和cookie
浏览器本地存储
weixin_46376652的博客
07-14 1596
localStorage.setItem方法用于添加一个本地缓存数据，接收两个参数，为key-value类型；①、当value数据类型为数字类型时，会自动转换为字符串类型进行存储；②、当value中的数据类型为对象类型时，需要使用JSON.stringify()函数将其转换为字符串类型进行存储； localStorage.getItem()方法接收一个参数key，用于读取数据；JSON.parse()方法用于将对象字符串转换为对象类型； localStorage.removeItem()方法接收一个
为什么localstorage获取不到数据_JavaScript浏览器端数据存储方案之Web Storage篇
weixin_39676242的博客
12-14 3460
打开UC浏览器 查看更多精彩图片在做项目的过程中，我们经常遇到需要把信息存储在本地的情况，比如权限验证的token、用户信息、埋点计数、客户配置的皮肤信息或语言种类等，我们可以暂存一下避免浏览器不必要的请求和客户多余操作，给客户使用带来方便。这篇文章主要介绍localStorage和sessionStorage。HTML5中 Web Storage 的出现，主要是为了弥补使用 Cookie 作为本...
loclstorage 存储和取值
weixin_44191425的博客
06-21 638
这个问题在工作中遇到不止一次 所以觉得还是有必要记录一下子 我们在对某些数据进行存储的 都会使用loclstorage.setItem(key,value) 但是要注意的是 进行春存储的值都是字符串存储的，也就是你loclstorage.getItem(key) 的结果 如果用typeof去console.log()一下会发现 结果是 string 但是很多时候我们需要存储用户信息，是这样的 userInfo = {name：‘1111’，age：‘12’，…} 所以去getItem取值之后
vue监听缓存数据（localStorage） 中值的更新
热门推荐
xy_xxyy的博客
07-05 1万+
vue监听缓存数据（localStorage） 中值的更新
html5的localStorage之【增 删 改 查】
qq_43718131的博客
11-20 882
html5的localStorage之【增 删 改 查】
js将数据存到localStorage
最新发布
06-03
在 JavaScript 中，我们可以使用 `localStorage` 对象将数据存储到本地浏览器中。 以下是一个简单的示例，演示如何将数据存储到 `localStorage` 中： ```javascript // 将数据存储到 localStorage 中 localStorage...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值