h5本地存储

最新推荐文章于 2022-08-08 20:05:07 发布
最新推荐文章于 2022-08-08 20:05:07 发布
阅读量643 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： 前端 javascript 存储 标签
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_38337068/article/details/74064922

有临时存值和永久存值，还有清空值；

  //临时存储

window.sessionStorage.setItem('nu',inp[3].value);   //存值 名称  对象的值或内容
window.sessionStorage.getItem('nu');  //获取存到的值
window.sessionStorage.clear();     //删除存到的值

//永久存储

window.localStorage.setItem('nu',inp[3].value);   名称  对象的值或内容

var a=window.localStorage.getItem('nu');  //获取存到的值
alert(a);

window.localStorage.clear();   

下面来看一个实例；多用户注册和登陆；

html代码

<body>
<input type="text" />
<input type="text" />
<input type="button" value="登录"/>
<input type="text"  placeholder="账号"/>
<input type="text" placeholder="手机号"/>
<input type="text" placeholder="密码"/>
<input type="button" value="注册" />
</body>

JS部分

var inp=document.querySelectorAll("input");
var a=window.localStorage; /*永久存储*/

//注册赋值
inp[6].onclick=function(){ 
/*window.localStorage.clear(); 清除本地存储*/
if(a.getItem("Account")){  /*账号 判断如果本地存储里面已经有了值*/
a.Account+="/"+inp[3].value;// 因为前面的一个值会覆盖下面的一个值，所以用字符串拼接起来
}else{
a.Account=inp[3].value;/*如果没有值就直接赋予值*/
}
if(a.getItem("Password")){ /*密码 判断如果本地存储里面已经有了值*/
a.Password+="/"+inp[4].value;// 因为前面的一个值会覆盖下面的一个值，所以用字符串拼接起来
}else{
a.Password=inp[4].value;/*如果没有值就直接赋予值*/
}
if(a.getItem("phone")){ /*手机 判断如果本地存储里面已经有了值*/
a.phone+="/"+inp[5].value;// 因为前面的一个值会覆盖下面的一个值，所以用字符串拼接起来
}else{
a.phone=inp[5].value;/*如果没有值就直接赋予值*/
}

}

//原生 
/*inp[3].onblur=function (){
if(a.getItem("Account")){ 账号  如果里面是否有值  则进行判断是否已被注册
var Acco=a.getItem("Account").split("/");
for(var i=0;i<Acco.length;i++){
if(inp[3].value==Acco[i]){
alert("改账号已被注册")
inp[3].value="";   清除内容
inp[3].focus(); 重新获取焦点
}
}
}
}
inp[4].onblur=function (){
if(a.getItem("phone")){
var Acco=a.getItem("phone").split("/");
for(var i=0;i<Acco.length;i++){
if(inp[4].value==Acco[i]){
alert("改账号已被注册")
inp[4].value=""; 
inp[4].focus();
}
}
}
}*/



//封装函数
function foo(type,n,title){ /*传参数*/
if(a.getItem(type)){
var Acco=a.getItem(type).split("/");
for(var i=0;i<Acco.length;i++){
if(inp[n].value==Acco[i]){
alert(title)
inp[n].value=""; 
inp[n].focus();
}
}
}
}

//账号
inp[3].onblur=function(){ /*接受参数*/
var ren=/^\S{2,5}$/;
if(!ren.test(inp[3].value)){
alert("账号格式不对")

}

foo("Account",3,"改账号已被注册"); /*赋值参数*/

}
//手机
inp[4].onblur=function(){ /*接受参数*/

var ret=/^1[3|4|5|8|9][0~9]\d{8}$/;
if(!ret.test(inp[4].value)){
alert("手机格式不对")
}

foo("phone",4,"改手机已被注册");/*赋值参数*/
}


//登录信息
inp[2].onclick=function(){ 
var Acco=a.getItem("Account").split("/");// 账号  获取本地存储里面的值 把字符串分割成数组，用于下面登陆和注册时的匹配
var Pass=a.getItem("Password").split("/");// 密码  获取本地存储里面的值 把字符串分割成数组，用于下面登陆和注册时的匹配
var bool=false
for(var i=0;i<Acco.length;i++){
if(inp[0].value==Acco[i]&&inp[1].value==Pass[i]){    //匹配是否已经注册  
bool=true
alert("登录成功")
break                //匹配到则跳出函数
}
}
if(!bool){
alert("密码或账号错误")
}
}
   

羽湘楚
关注
HTML5本地存储（localStorage和sessionStorage）
百赢出品，必属精品
04-06 2106
HTML5引入了本地存储机制，使得网页能够在客户端存储数据。Web Storage (localStorage 和 sessionStorage): 提供了在浏览器关闭后仍然保持数据的能力，数据存储在客户端，并没有过期时间。: 仅在当前会话期间（即当前浏览器窗口或标签页处于打开状态）有效，关闭窗口或标签页时会被清除。这两种存储方式都是基于键值对的形式存储数据，并且只能存储字符串类型的数据。但是，你可以使用和将对象转换为字符串并存储，以及从字符串中解析出对象。
h5三种本地储存形式
康一夏忙中偷闲的日子
01-10 246
当前会话有效，关闭即刷新。本地存储，无过期时间。
H5本地存储
Dear_pandy的博客
08-08 741
本地存储是指把数据存储在浏览器中的localStorage和sessionStarage上。按下F12进入浏览器检查，选择Application即可看到浏览器本地存储。localStorage和sessionStarage都是以Key-value的方式保存格式为字符串的数据。localstorage永久储存，关闭浏览器也不消失，而sessionStorage则是临时存储，关闭浏览器就消失了。本地存储操作通常配合jsonAPI来使用。...
基于JSON的H5本地存储
01-09
基于JSON的H5本地存储，提供一套简易、强大的API，几乎不需要学习即可直接使用
h5 本地存储
alhivlhos222178181的博客
09-21 210
H5本地存储有两个API，一个是Web Storage，还有一个是Web SQL。不管是哪一个，都是基于JavaScript语言来使用，接下来我就教你怎么使用H5本地存储，本文篇幅较大，JS代码较多，请耐心阅读。 一、Web Storage教程 1、概述： 对于Web Storage来说，实际上是Cookies存储的进化版。如果了解Cookie的人几乎一看Web S...
H5本地存储技术和微信小程序中的本地存储
weixin_30507481的博客
08-27 902
1.H5的本地存储 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <me...
h5 - 本地存储
w972036796的博客
08-17 301
H5- localStorage 文章目录H5- localStorage在客户端存储数据**cookie****localStorage****sessionStorage**localStorage基本语法**localStorage本地方法****localStorage 的巧用**自己扩展：真实项目中使用的第三方插件 在客户端存储数据 cookie 但是 cookie 不适合大量数据的存...
H5 本地存储
weixin_45974687的博客
05-17 538
1. localStorage 本地存储 本地存储 就是把数据存储在浏览器端 本地存储的方法 : 保存数据 localStorage.setItem(属性名字符串,属性值) // 保存数据 document.getElementById("btn1").onclick = function () { // 本体存储是以键值的形式来进行的 localStorage.setItem("name", "张三");
H5的本地存储
mojirg的博客
06-09 349
H5本地存储API中有localStorage和sessionStorage，区别在于sessionStorage在 关闭页面后就会清空，而localStorage 会一直保存。 1、localStorage API 基本使用方法 保存数据语法： localStorage.setItem("key", "value"); 读取数据语法： let data = localStorage.getItem("key"); 删除数据语法： localStorage.removeItem("key"); 遍历
HTML5中web存储
the_lower的博客
12-01 221
在客户端存储数据 HTML5 提供了两种在客户端存储数据的新方法： localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。 在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。 对于不同的网站，数
H5本地存储详解：Web Storage与WebSQL对比
H5本地储存Web Storage是HTML5的一项重要功能，旨在解决HTML4时代的Cookie在数据存储方面的局限性。由于Cookie存在大小限制（4096字节）、数量限制（一般每个站点不超过20个，总数量限制通常为300个）以及不能用于非...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值