html5用户名和密码保存,登录时,记住用户名和密码的功能——HTML5 WEB存储(localStorage)...

前言

想要实现登录一次,下次再进登录页面,直接出现上次登录的用户名和密码。

运用的知识点

一、localStorage、sessionStorage?

localStorage - 没有时间限制的数据存储

sessionStorage - 针对一个 session 的数据存储

之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储(cookie中每条cookie的存储空间为4k,localStorage中一般浏览器支持的是5M大小),因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。

在 HTNL5中,数据不是有每个服务器请求传递的,而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

对于不同的网站,数据存储于不同的区域,并且一个网站只能访问其自身的数据。

HTML5 使用 JavaScript来存储和访问数据。

二、localStorage的优势与局限性

localStorage的优势

1.localStorage拓展了cookie的4K限制

2.目前所有的浏览器中都会把localStorage的值类型限定为string类型,这个在对我们日常比较常见的JSON对象类型需要一些转换

3.localStorage本质上对字符串的读取,如果存储内容对的话会消耗内存空间,会导致页面变卡

4.localStorage不能被爬虫抓取到

5.localStorage在浏览器的隐私模式下面是不可读取的

localStorage和sessionStorage的唯一区别是localStorage没有时间限制。第二天、第二周或下一年之后,数据依然可用,属于永久性存储,而sessionStorage属于当会话结束的时候,sessionStorage中的键值对会被清空

三、如何使用localStorage?

首先使用localStorage的时候,我们需要判断浏览器是否支持localStorage这个属性

if(!window.localStorage){

alert("浏览器支持localstorage");

return false;

}else{

//主逻辑业务

}

locaStorage的写入有三种方法,分别是:

if(!win

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值