JSON.stringify localStorage.getItem JSON.parse localStorage.setItem

最新推荐文章于 2024-05-29 11:23:25 发布
最新推荐文章于 2024-05-29 11:23:25 发布
阅读量2.5k 收藏
点赞数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习 网站导航</title>
    <style>
              *{
  margin:0;
  padding:0;
  list-style:none;}
    </style>
     <script src="js/jquery-3.3.1.js"></script>
</head>
<body>
                <div style="border: 2px dashed #ccc;width:320px;text-align:center;">
                    <label for="keyname">别名(key):</label>  
                    <input type="text" id="keyname" name="keyname" class="text"/>  
                    <br/>  
                    <label for="sitename">网站名：</label>  
                    <input type="text" id="sitename" name="sitename" class="text"/>  
                    <br/>  
                    <label for="siteurl">网 址：</label>  
                    <input type="text" id="siteurl" name="siteurl"/>  
                    <br/>  
                    <input type="button" οnclick="save()" value="新增记录"/>  
                    <hr/>  
                    <label for="search_site">输入别名(key)：</label>  
                    <input type="text" id="search_site" name="search_site"/>  
                    <input type="button" οnclick="find()" value="查找网站"/>  
                    <p id="find_result"><br/></p>  
                </div>
    <script>
function save(){
var site=new Object;
site.keyname=$("#keyname").val();
site.sitename=$("#sitename").val();
site.siteurl=$("#siteurl").val();
var str=JSON.stringify(site);
localStorage.setItem(site.keyname,str);
console.log(localStorage.getItem(site.keyname));
}
function find(){
var search_site=$("#search_site").val();

var str=localStorage.getItem(search_site);
 var site = JSON.parse(str); 
 $("#find_result").get(0).innerHTML=site.sitename;
}


    </script>
</body>
</html>
liu709127859
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
综合案例，index，register，login
qq_41619968的博客
05-28 545
index let li=document.querySelector('.xtx_navs li:first-child'); let obj=JSON.parse(localStorage.getItem('data')); if(obj){ li.innerHTML=`<a href="#">您好${obj.username}用户!</a>`; } register let icon=document.querySelector('.icon-queren'.
vue使用二次封装存储localStorage
03-04
在这个例子中，我们定义了`setItem`、`getItem`和`removeItem`三个基本方法，分别对应localStorage的原生方法。由于localStorage只能存储字符串，我们在存入和取出时都进行了JSON序列化和反序列化的处理。 2. 在Vue...
JSON.stringify()结合localStorage
FEE
01-18 608
JSON.parse() 方法用来解析JSON字符串，构造由字符串描述的JavaScript值或对象 JSON.stringify() 方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串 当我们想存储用户创建的一个对象，并且，即使在浏览器被关闭后仍能恢复该对象时： var localEvent = function (item) { this.get
你可能不知道 JSON.stringify() 的这些妙用
小生方勤
08-06 596
1.用来调试对象我们先来看看下面这个代码在控制台中输出什么//InitializeaUserobject constuser={ "name":"...
LocalStorage存储和取值
最新发布
Future_Planet23的博客
05-29 391
本文主要描述了,怎么样用LocalStorage.setItem()方法存储数据到浏览器,以及用LocalStorage.getItem()方法把数据取出来.语法:注:value的值必须是字符串（可以先用json.stringify把对象转成字符串。
localStorage如何拿到Json对象里的指定的值
嘻嘻哈哈学技术
04-25 689
localStorage里的样子 解决思路就是： 先 localStorage.getItem(“userInfo”); 然后 JSON.parse(user)转换成对象 let user = localStorage.getItem("userInfo"); user = JSON.parse(user) this.form.applyName = user.nickname; this.form.mgAd = user.username;
localStorage及JSON.stringify()和JSON.parse()使用方法
weixin_45786214的博客
02-05 1954
文章是本人闲时所写，方便自己以后查阅，如若有幸被您阅读的话，备感荣幸，文章仅为个人理解，如内容有误还望告知，感谢！！！
json.stringify()与json.parse()的区别以及用处.docx
01-20
let val = JSON.parse(window.localStorage.getItem(key)); window.localStorage.removeItem(key); return val; } ``` 3. 实现对象深拷贝：JSON.stringify() 和 JSON.parse() 结合可以创建一个对象的深拷贝，但...
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
09-28
localStorage.setItem('localData', str_jsonData); // 存储字符串数据到本地 ``` 当我们需要从`localStorage` 中读取并使用这些数据时，先要获取存储的字符串，然后使用 `JSON.parse()` 方法将其转换回JSON对象： ...
15 - LocalStorage.rar
05-01
localStorage.setItem('person', JSON.stringify(obj)); // 获取对象 var personStr = localStorage.getItem('person'); var personObj = JSON.parse(personStr); ``` **事件监听：** LocalStorage的变化可以触发`...
vue.js实现城市选择页面
12-27
localStorage.setItem('selectedCity', JSON.stringify(this.selectedCity)); } ``` 最后，为了实现流畅的触摸滑动效果，可以使用第三方库如`Hammer.js`，它为触摸设备提供了手势识别。将Hammer.js与Vue.js结合，...
json字符串,本地存储讲解localstorage 和 sessionstorage及cookie,模板字符串初识
你还有我
01-21 1344
json字符串 “abc123truelkgsjhgo” 普通字符串 "<h1>hgahgo</h1>" html格式字符串 键值对格式 键和值都需要用双引号去包括 ‘“name”:“yasuo”’ json用途： 在网络传输时使用。 比如前后端交互。 不能够传输对象和数组的。 只能通过字符串形式去传输数据。 所以说我们如果要传输对象和数组，我们需要将其转换为字符串。 json格式就是满足对象和数组数据结构的一种字符串 json的使用方法 JSON.parse() 把json格式
在使用localstorage的时候发生了报错的解决办法
李大大的博客
08-13 1万+
在使用localstorage的时候，发生了报错，提示是传入的格式不正确，但是传入的是json格式，为什么不正确呢？ 1、在localStorage.setItem("",{})过程中，传进的参数需使用JSON.tringfy()方法转成json格式的字符串。 2、在localStorage.getItem("",{})过程中，要使用JSON.parse(localStorage.getIte...
HTML5规范的本地存储
weixin_34071713的博客
12-07 111
在HTML5 中定义了两种本地存储的，Web Storage 和本地数据库 SQL Database .　　用来检查判断浏览器是否支持 Web Storage 　　if(window.localStorage){ 　　　　//浏览器支持localStorage 　　} 　　if(window.sessionStorage){ 　　　　//浏览器支持sessionStorage 　　} ...
localStorage.setItem()、localStorage.getItem()、JSON.stringify()、 JSON.parse()；的使用
weixin_57666779的博客
11-26 1081
localStorage对象是HTML5的客户端存储持久化数据的方案，localStorage。如果需要存储复杂类型的数据例如：数组，对象，需要。方法将数组、对象转换为字符串形式，取出时再使用。方法将字符串转换为对象、数组形式；localStorage对象。
关于localStorage的getItem方法获取到的是字符串的问题
weixin_42190844的博客
11-15 3938
今天遇到了一个bug。因为有个地区数据是要存在本地的。但要作判断，如果数据为空的话，要发起请求获取数据。 首先我这里的localStorage.getItem(‘AreaList’)是个空数组。 按我的if逻辑来说， [ ] === null 为false，然后就会去判断后面的[ ].length = 0 这里应该是true，那么就会去执行if下面的代码。问题就出现在这里，代码没用执行到。也就是说明 if 的整个判断是 false、 我就把获取到的数据，看看它的typeof ，打印出来发现是stri.
JS的localStorage,JSON.stringify(),JSON.parse()的运用
小冯的博客
05-29 3729
JSON.parse() JSON 通常用于与服务端交换数据。 在接收服务器数据时一般是字符串。 我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。 语法 JSON.parse(text[, reviver]) 参数说明： text:必需， 一个有效的 JSON 字符串。 reviver: 可选，一个转换结果的函数， 将为对象的每个成员调用此函数。 类似 par...
localStorage.setItem()使用
热门推荐
weixin_41997724的博客
11-27 13万+
什么是localStorage 在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。 localStorage的优势 1、localStorage拓展...
localStorage.getItem得到的是[object Object] 的解决方案
weixin_30845171的博客
07-02 1122
设计背景： 购物车要实现本地存储，避免刷新页面数据丢失 实现方案： 1，本地储存，进入页面获取本地数据，在进行数据操作 　　　　　 2，每操作一次数据就将数据传给后台进行保存，（操作数据多，用户量大对服务器造成压力较大） 选择方案2 localStorage.setItem 只能存储字符串， 所以在储存的时候先将对象转换为字符串 localStorage.setItem("loc...
localStorage.setItem("goodsList", JSON.stringify(this.goodsList));
06-02
这是一个使用JavaScript中的localStorage对象将数据存储在浏览器中的示例代码。 localStorage是一个本地存储对象，它可以在浏览器中存储键值对数据，这些数据在浏览器关闭后也会保留在本地。使用localStorage可以方便地在浏览器中存储数据，比如用户的设置、用户的购物车数据等等。 在这个示例中，我们将一个名为`goodsList`的数组对象存储在localStorage中。使用`JSON.stringify()`方法将JavaScript对象转换为JSON格式的字符串，然后使用`localStorage.setItem()`方法将其存储在本地。以下是示例代码： ```js localStorage.setItem("goodsList", JSON.stringify(this.goodsList)); ``` 在这个示例中，`this.goodsList`是一个JavaScript对象或数组。`JSON.stringify()`方法将其转换为一个JSON格式的字符串，然后使用`localStorage.setItem()`方法将其存储在本地。 如果需要从localStorage中获取数据，可以使用`localStorage.getItem()`方法获取存储的数据，然后使用`JSON.parse()`方法将其转换为JavaScript对象或数组。以下是示例代码： ```js // 从localStorage中获取数据 const goodsListString = localStorage.getItem("goodsList"); const goodsList = JSON.parse(goodsListString); ``` 在这个示例中，`localStorage.getItem()`方法获取名为`goodsList`的数据字符串，然后使用`JSON.parse()`方法将其转换为JavaScript对象或数组。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值