localStorage 本地存储的相关知识点总结(页面登录注册功能的简单实现)

1、什么是localStorage

用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同。

2、localStorage 优势与局限

优势:
a、localStorage拓展了cookie的4K限制
b、localStorage会可以将第一次请求的数据直接存储到本地,这个相当于一个5M大小的针对于前端页面的数据库,相比于cookie可以节约带宽,但是这个却是只有在高版本的浏览器中才支持的

局限:
a、浏览器的大小不统一,IE8以上的IE版本才支持localStorage这个属性
b、目前所有的浏览器中都会把localStorage的值类型限定为string类型,这个在对我们日常比较常见的JSON对象类型需要一些转换
c、localStorage在浏览器的隐私模式下面是不可读取的
d、localStorage本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡

3、localStorage 本地存储 操作 :增 删 改 查

增 :
有三种方案

var ls = window.localStorage;
ls.aa = 1;
ls["bb"] = 2;
ls.setItem("cc&#
  • 3
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
localstorage是一种浏览器提供的本地存储机制,可以将数据存储在用户的浏览器中,即使用户关闭浏览器或者电脑,数据也不会丢失。我们可以利用localstorage实现登录注册功能。 具体实现方法如下: 1. 注册功能 当用户在注册页面输入用户名和密码后,我们可以将这些信息存储在localstorage中。代码如下: ``` // 获取用户名和密码 var username = document.getElementById('username').value; var password = document.getElementById('password').value; // 将用户名和密码存储在localstoragelocalStorage.setItem(username, password); ``` 2. 登录功能 当用户在登录页面输入用户名和密码后,我们可以从localstorage中获取该用户的密码,然后与用户输入的密码进行比较,如果一致则登录成功。代码如下: ``` // 获取用户名和密码 var username = document.getElementById('username').value; var password = document.getElementById('password').value; // 从localstorage中获取该用户的密码 var storedPassword = localStorage.getItem(username); // 比较密码 if (password === storedPassword) { alert('登录成功!'); } else { alert('用户名或密码错误!'); } ``` 需要注意的是,localstorage中存储的数据是以键值对的形式存在的,因此我们可以将用户名作为键,密码作为值存储在localstorage中。在登录时,我们可以根据用户名从localstorage中获取密码,然后进行比较。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值