本地存储

最新推荐文章于 2022-09-29 15:27:45 发布
最新推荐文章于 2022-09-29 15:27:45 发布
阅读量290 收藏 1
点赞数 1
分类专栏： js学习笔记 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41670147/article/details/103419994
版权

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变得越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。

1、本地存储特性

1、数据存储在用户浏览器中
2、设置、读取方便、甚至页面刷新不丢失数据
3、容量较大，sessionStorage约5M、localStorage约20M
4、只能存储字符串，可以将对象JSON.stringify()编码后存储

2、window.sessionStorage

1、生命周期为关闭浏览器窗口
2、在同一个窗口（页面）下数据可以共享
3、以键值对的形式存储使用
存储数据：

sessionStorage.setltem(key, value)

获取数据：

sessionStorage.getltem(key)

删除数据：

sessionStorage.removeltem(key)

删除所有数据：

sessionStorage.clear()

<!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;
            sessionStorage.setItem('uname', val);
        });
        //输出结果查看，点击Application，点击Session Storage下面的file://查看
        //获取数据
        get.addEventListener('click', function() {
                console.log(sessionStorage.getItem('uname'));

            })
            //删除数据
        remove.addEventListener('click', function() {
                sessionStorage.removeItem('uname')
            })
            //删除所有数据
        del.addEventListener('click', function() {
            sessionStorage.clear()
        })
    </script>
</body>

</html>

3、window.localStorage

1、生命周期永久生效，除非手动删除，否则关闭页面也会存在
2、可以多窗口（页面）共享（同一浏览器可以共享）
3、以键值对的形式存储使用
存储数据：

localStorage.setltem(key,value)

获取数据：

localStorage.getltem(key)

删除数据：

localStorage.removeltem(key)

删除所有数据：

localStorage.clear()

<!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('uname', val);
        });
        //输出结果查看，点击Application，点击localStorage下面的file://查看
        //获取数据
        get.addEventListener('click', function() {
                console.log(localStorage.getItem('uname'));

            })
            //删除数据
        remove.addEventListener('click', function() {
                localStorage.removeItem('uname')
            })
            //删除所有数据
        del.addEventListener('click', function() {
            localStorage.clear()
        })
    </script>
</body>

</html>

案例：记住用户名

<!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" id="username"><input type="checkbox" name="" id="remember">记住用户名
    <script>
        var username = document.querySelector('#username');
        var remember = document.querySelector('#remember')
        if (localStorage.getItem('username')) {
            username.value = localStorage.getItem('username')
            remember.checked = true;
        }
        remember.addEventListener('change', function() {
            if (this.checked) {
                localStorage.setItem('username', username.value)
            } else {
                localStorage.removeItem('username');
            }
        })
    </script>
</body>

</html>
前端笨鸟
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
三种基本存储（cookie、localStorage、sessionStorage）
LYM0411的博客
05-25 908
存储
javaScript基本语法学习(四)
linziwang的博客
03-30 319
一、offset、client、scroll三大家族介绍 1.1、offset概述 offset翻译过来就是偏移量，我们使用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。 获得元素距离带有定位父元素的位置 获得元素自身的大小（宽度高度） 注意：返回的数值都不带单位 offset系列常用属性： 1.2、offset与style区别 offset offset可以得到任意样式表中的样式值 offset系列获得的数值是没有单位的 offsetWidth包含padding+border
html5 01
Besides076930的博客
03-05 427
requires 模块覆盖关系： 两个没有id的模块 前面覆盖后面 两个相同id模块，前面覆盖后面 多个不相同id模块，共同兼容 接口定义：module transpots return值 | 引用 commonjs module.export接口|module exports = 值| 对象 | 函数 paths 简化文件路径 shim 将文件转为模块 map 映射文件 baseUrl 设置根目录 css插件 map进行配置 {css:'文件'} css!文件 本地存储 loca
JavaScript本地存储
weixin_45802907的博客
05-06 163
本地存储 数据存储用户浏览器中 设置、读取方便、甚至页面刷新不会丢失数据 容量较大，sessionStorage约为5M，localStorage约为20M 只存储字符串，可以将对象JSON.stringIfy()编码后存储 一、window.sessionStorage 生命周期为关闭浏览器窗口 在同一个窗口(页面)下数据可以共享 以键值对的形式春初使用 存储数据 sessionStorage.setltem(key,value); 获取数据 sessionStorage.getltem(key);
原生JS实现购物车本地存储
08-18
利用原生js和本地存储技术实现购物车功能
基于js 本地存储(详解)
10-19
JavaScript本地存储技术允许开发者在用户浏览器中保存数据，即使用户关闭了浏览器，这些数据仍然能够被保留。这在实现特定功能如记住用户状态、购物车持久化等方面非常有用。主要的本地存储方案包括Cookie、...
HTML5 本地存储实现购物车功能
09-28
其次，本地存储的数据不安全，任何可以访问用户浏览器的人都可以看到存储的信息，所以敏感数据应避免使用此方式存储。最后，考虑到跨域安全性和隐私政策，开发者需要谨慎使用`localStorage`，并确保其符合相关的规范...
Android本地存储SharedPreferences详解
08-30
Android本地存储SharedPreferences详解 Android本地存储SharedPreferences是Android系统提供的一种轻量级的本地存储机制，主要用于保存应用程序中的配置信息、用户设置和其他少量的数据。下面将详细介绍Android...
Cloudreve云盘源码，支持本地储存和对接各大对象储存
最新发布
11-01
loudreve云盘源码，支持本地储存和对接各大对象储存,界面 美观 测试环境:PHP7.1 + MYSQL5.6 + Apache 上传源码到根目录 安装程序: 浏览器数据 http://localhost/CloudreveInstallerlocalhost更换成你的网 址 安装...
JavaScript LocalStorage 完整指南
p1967914901的博客
09-29 3740
对于大多数 web 浏览器，提供了在浏览器中存储键值对的机制。它通常分为和，两者之间的主要区别是浏览器存储数据的时间。使用，。但是，中的数据会一直保存到清除为止。特性在许多用例中都是有帮助的。本文将详细介绍及其工作原理，以便你可以在应用程序中使用它。
前端开发，JavaScript实际开发过程中常用JS小技巧
MaybyYouLove的博客
12-05 1534
1.JS 阻止‘a’标签默认事件 //阻止a标签默认事件 var evt = evtwindow.event;/获取event对象 if (evt.preventDefault) { evt.preventDefault(;//非IE浏览器 } else { evt.returnValue =false;//IE低版本 } 2.JS 判断当前是苹果系统还是安卓系统 if (/iPhone/.test(navigator.userAgent)){ $(".btn:last").attr("href"
webStorage浏览器本地存储
m0_50693593的博客
01-13 204
webStorage浏览器本地存储 1.存储内容大小一般支持5MB左右(不同浏览器可能还不一样) 2.浏览器端通过Window.sessionStorage和Window.localStorage属性来实现本地存储机制。 3.相关API: xxxxxStorage.setItem( ’ key ’ , 'value ’ ); 该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。 2.xxxxxStorage.getItem( ’ person ’ ); 该方法接受一个键
HTML5中的数据存储
zhangbin18607544869的博客
09-21 516
今天刚学习了HTML5中的数据存储，简单的学习了如何使用WebStorage中的api length:获取当前WebStorage中的数目 key:返回WebStorage中的第N个存储条目   getltem(key):返回指定key的存储内容，如果不存在则返回null.注意，返回的类型是字符串类型 setltem(key,value)：设置指定key的内...
python之__getitem__的用法
Unremitting__的博客
07-24 4092
__getitem__在定义上可以理解为：把类中的属性定义为序列，可以使用__getitem__()函数输出序列属性中的某个元素. 如果单纯的对类进行实例化，并不会调用__getitem__，代码示例： class datasets: def __init__(self, name, age): self.name = name self.age = age def __getitem__(self, key): return...
localStorage与sessionStorage 最简单的入门
Blog - Fengbo Liang
02-28 804
在前端开发中，尽量少用cookie，原因： 1.cookie限制大小，约4k左右，不适合存储业务数据，尤其是数据量较大的值 2.cookie会每次随http请求一起发送，浪费宽带 在移动开发中尽量用localstroage，优点： 1.存储数据量大，localStorage拓展了cookie的4K限制 2.会随http请求一起发送，localStorage会可以将第一次请求的数据直接...
python:__setitem__方法详解
热门推荐
LYY的学习和记录
08-11 2万+
__setitem__(self,key,value): 这个方法应该以与键相关联的方式存储值，以便之后能够使用__setitem__来获取。当然，这个对象可变时才需要实现这个方法。 class Tag: def __init__(self): self.change={'python':'This is python', '......
浏览器的本地存储与服务器端存储
wuqianjing的博客
08-20 2223
数据既可以在浏览器本地存储，也可以在服务器端存储 浏览器端可以保存一些数据，需要的时候直接从本地获取，sessionStorage,localStorage和cookie都是由浏览器存储在本地的数据 服务器端也可以保存所有用户的数据，但需要的时候浏览器要向服务器请求数据 1.服务器端可以保存用户的持久性数据，如数据库和云存储将用户大量数据保存在服务器端  2.服务器端也可以保存用户的临时会话...
html实现本地储存登录
05-19
可以使用浏览器的本地存储 localStorage 或 sessionStorage 来实现本地储存登录。 首先，在登录页面，将用户输入的用户名和密码存储到本地存储中： ```javascript // 获取用户名和密码输入框的值 var username = document.getElementById("username").value; var password = document.getElementById("password").value; // 将用户名和密码存储到本地存储 localStorage.setItem("username", username); localStorage.setItem("password", password); ``` 接着，在主页面，判断本地存储中是否存在用户名和密码，如果存在，则自动登录： ```javascript // 从本地存储中获取用户名和密码 var username = localStorage.getItem("username"); var password = localStorage.getItem("password"); // 判断用户名和密码是否存在 if (username && password) { // 自动填充用户名和密码 document.getElementById("username").value = username; document.getElementById("password").value = password; // 执行登录操作 login(); } ``` 需要注意的是，本地存储中的数据可以被用户手动清除，因此不能完全依赖本地存储来保证登录状态。在服务端也需要进行验证和授权。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值