JavaScript中的localStorage

已于 2022-12-16 20:25:29 修改
阅读量927 收藏 2
点赞数 1
分类专栏： JS学习之旅 文章标签： javascript 前端 开发语言
于 2022-12-07 17:37:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51447496/article/details/128224131
版权

JavaScript中的localStorage

参考这篇文章一起学习：JavaScript中的session

案例池子：
JS实现鼠标悬停变色

JavaScript中的排他算法实现按钮单选
JavaScript中的localStorage

JavaScript中的sessionStorage

JavaScript实现网页关灯效果
JavaScript实现一段时间之后关闭广告

JavaScript实现按键快速获取输入框光标

效果展示

在这里插入图片描述

概述

在这里插入图片描述

简介：localStroage是JavaScript中的，在浏览器中存储数据的一个API，我们通过一个例子演示他的使用方法，它与sessionStorage的区别在于，sessionStorage的声明周期是页面没有关闭，而且sessionStorage是只能单页面使用。

学习代码

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

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

<body>
    <input type="text">
    <button class="set">存储数据</button>
    <button class="get">获取数据</button>
    <button class="remove">删除数据</button>
    <button class="del">清空所有数据</button>
    <script>
        var ipt = document.querySelector('input');
        var set = document.querySelector('.set');
        var get = document.querySelector('.get');
        var remove = document.querySelector('.remove');
        var del = document.querySelector('.del');
        set.addEventListener('click', function() {
            var val = ipt.value;
            localStorage.setItem('username', val);
        })
        get.addEventListener('click', function() {
            console.log(localStorage.getItem('username'));

        })
        remove.addEventListener('click', function() {
            localStorage.removeItem('username');

        })  
        del.addEventListener('click', function() {
            localStorage.clear();

        })
    </script>
</body>

</html>
极客李华
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
JavaScript localStorage本地存储的简单使用
AKGWSB 's blog
07-17 2006
在web编程中，经常要持久存储用户的一些信息，比如购物车，收藏夹，设置等待信息 之前的博客已经提到有两种存储用户信息的方法，cookie和session session存储在服务端，会带来服务器内存开销，主要存储用户不能篡改的敏感数据 cookie存储在本地，每次访问站点都带上cookie，会带来额外带宽的开销 上述两种方式都是【要和服务器进行数据交换】的情况下，我们会采用。 可是如果一种应用不需要和服务器进行数据交互，比如网页的偏好设置（字体大小，语言，界面样式等），我们希望用户本地自己保存这些偏好设
localStorage使用总结
weixin_33675507的博客
06-26 5175
一、什么是localStorage、sessionStorage 在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。   二、localStorag...
JavaScript本地存储（Local Storage）
rr20060119的博客
09-27 853
JavaScript本地存储是一项非常有用的技术。它允许我们在用户的浏览器中存储数据，以便在不同的网页之间保持持久性。
Javascript：本地存储之localStorage
最新发布
听海边涛声
06-27 1106
Javascript：本地存储之localStorage
HTML5 LocalStorage 本地存储
weixin_30497527的博客
04-19 795
HTML5LocalStorage本地存储 说到本地存储，这玩意真是历尽千辛万苦才走到HTML5这一步，之前的历史大概如下图所示： 最早的Cookies自然是大家都知道，问题主要就是太小，大概也就4KB的样子，而且IE6只支持每个域名20个cookies，太少了。优势就是大家都支持，而且支持得还蛮好。很早以前那些禁用cookies的用户也都慢慢的不存在了，就好像以前禁用j...
JavaScript LocalStorage
caisense的专栏
07-15 219
https://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html
js本地存储（localStorage）
2201_75918981的博客
03-17 1218
运行结果： 控制台打印obj对象，且通过f12->Application->Local Storage可以查看到存入了的JSON字符串格式的obj。运行结果：控制台打印666，且通过f12->Application->Local Storage可以查看到存入了键为number，值为666的值。取数据：JSON.parse(localStorage.getItem('obj')) //将obj先取出，再转为原来的数据格式。取数据：localStorgae.getItem(key)
JavaScript中localStorage对象存储方式实例分析
10-20
- 存储在localStorage中的数据没有过期时间，除非手动删除或清除浏览器缓存。 - 数据在同源的所有页面中都是共享的。 - localStorage只能存储字符串，这意味着如果你存储其他类型的JavaScript变量（比如布尔值、对象...
基于JavaScript中localStorage的安踏官网项目源码(课程作业).zip
01-11
基于JavaScript中localStorage的安踏官网项目源码(课程作业).zip基于JavaScript中localStorage的安踏官网项目源码(课程作业).zip基于JavaScript中localStorage的安踏官网项目源码(课程作业).zip基于JavaScript中...
详解JavaScript中localStorage使用要点
10-22
localStorage主要用来替代cookie，解决cookie(可参考cookie使用要点)读写困难、容量有限的问题，对js localstorage的使用相关知识感兴趣的朋友一起学习吧
JavaScript localStorage讲解
weixin_46388225的博客
06-24 1091
什么是localStorage 在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的。 localStorage优势 1、localStorage拓展了cookie的4K限制 2、localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽。 localStorage的局限 1、浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性 2、目前所有的浏览器
JavaScript的本地存储localStorage
qq_40994735的博客
08-15 817
localStorage1 localStorage的简介2 localStorage 操作2.1 创建操作2.2 删除操作2.3 清空所有3 案例利用 1 localStorage的简介 localStorage是HTML5新增特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage保存在缓存里，只有手工删除或者清理浏览器缓存方可失效。在容量上也有一些限制，主要看浏览器的差异，Firefox3+、IE8
js中的localStorage
weixin_46435234的博客
07-04 682
//localStorage会可以将第一次请求的数据直接存储到本地 /* 存放数据键值对到本地： localStorage.setItem("键值",数据) localStorage.键值 取出存放在本地的数据： localStorage.getItem("键值") 删除键值对 localStorage.clear() 清空 localStorage.removeItem("键值");　　 */ // 保存用户状态 const isLo.
JS本地存储(localStorage)
珎珎啊
10-22 4441
一. 简介 localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库 　 ——注意：在IE8以上的IE版本才支持localStorage这个属性。localStorage属于永久性存储，如果存储内容多的话会消耗内存空间，会导致页面变卡。 二.具体使用方式如下： 1.localStorage - 没有时间限制的数据存储 　　 var arr=[1,2,3]; 　　 localStorage.setItem(“temp”,arr); //存入 参数： 1.调
js—localstorage (本地存储）必知
mxjwxhn的博客
10-21 8831
HTML API localstorage 在浏览器的 API 有两个：localStorage 和sessionStorage，存在于 window 对象中：localStorage 对应 window.localStorage，sessionStorage 对应window.sessionStorage。localStorage 和 sessionStorage 的区别主要是在于其生存期。 基本用法 localStorage只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份loc
js localStorage
树上骑个猴的博客
12-18 1852
localStorage是H5提供的永久存储空间，一般最大可存储5M数据，并且支持跨域隔离，他的出现极大提高了前端开发的可能性。localStorage的使用很多人都知道setItem，getItem,removeItem, 但他也可以直接以成员的方式操作。 localStorage.name = 'yd'; // 获取 localStorage.name; // yd // 删除 delete localStorage.name; // 清除全部 localStorage.clear(); // 遍历
JavaScript LocalStorage 完整指南
p1967914901的博客
09-29 4022
对于大多数 web 浏览器，提供了在浏览器中存储键值对的机制。它通常分为和，两者之间的主要区别是浏览器存储数据的时间。使用，。但是，中的数据会一直保存到清除为止。特性在许多用例中都是有帮助的。本文将详细介绍及其工作原理，以便你可以在应用程序中使用它。
JS Localstorage篇
い南秋乱港
09-23 321
Localstorage基础 H5新增特性 作用：本地存储, 解决了cookie存储空间不足的问题 ​ cookie中每条cookie的存储空间只有4k，localStorage一般支持5M, 不同浏览器里localStorage可能会有不同 优点： 拓展了cookie的4k的限制 localStorage就相当于前端的5M的数据库 劣势： 浏览器的大小不统一, 并且在IE8以上的浏览器才支持 localStorage存储的数据的类型 默认都会转成string, 以后我们如果要存储复杂的数据结
JS中localStorage的使用
Demolist的博客
10-30 2946
理论上来说是永久有效的，即不主动清空的话就不会消失，即使保存的数据超出了浏览器所规定的大小，也不会把旧数据清空而只会报错localstorage为标准的键值对（Key-Value）的数据类型，简单但也易扩展，只要以某种编码方式把想要存储进localstorage的对象给转化成字符串，就能轻松支持。
javascript中的localStorage
05-30
localStorage 是 HTML5 提供的一种在客户端存储数据的机制，可以在不使用服务器的情况下将数据存储在浏览器中。localStorage 中存储的数据是永久性的，除非用户主动清除浏览器缓存或者使用代码清除 localStorage 中的数据。 在 JavaScript 中，可以通过以下代码来使用 localStorage： ```javascript // 存储数据 localStorage.setItem('key', 'value'); // 读取数据 var value = localStorage.getItem('key'); console.log(value); // 删除数据 localStorage.removeItem('key'); ``` 需要注意的是，localStorage 中只能存储字符串类型的数据。如果需要存储 JSON 格式的数据，可以使用 `JSON.stringify()` 方法将数据转换成字符串再进行存储，使用 `JSON.parse()` 方法将字符串转换成 JSON 格式的数据进行读取。 ```javascript // 存储 JSON 格式数据 var data = {name: 'John', age: 30}; localStorage.setItem('data', JSON.stringify(data)); // 读取 JSON 格式数据 var jsonData = localStorage.getItem('data'); var data = JSON.parse(jsonData); console.log(data.name); // 输出 John ``` 需要注意的是，localStorage 中存储的数据大小是有限制的，不同浏览器的限制大小也不同，一般情况下为 5MB 左右。因此，在使用 localStorage 存储数据时要注意数据大小，避免超出限制导致存储失败。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

极客李华

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

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

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

打赏作者

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

抵扣说明：

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

余额充值