首页 / 知识
HTML5之网页存储
2023-04-11 15:17:00
HTML5网页存储WebStorage
一、认识WebStorage
WebStorage是一种将少量数据存储在客户端（client）磁盘的技术。只要支持WebStorageAPI规格的浏览器，网页设计者都可以使用JavaScript来操作它，我们先了解一下WebStorage。
WebStorage的容量由客户端浏览器决定，通常1MB~5MB。
WebStorage纯粹运行客户端，不会每次网页请求连带发送给服务端。
WebStorage以一组key-value对应保存数据。
WebStorage提供两种方式将数据保存在客户端：一种是localStorage，一种是sessionStorage，两者的差异在于申明周期和有效范围。
表一WebStorage类型的差异
WebStorage类型 生命周期 有效范围
localStorage 执行删除命令时才会消失 同一网站的网页可以跨窗口和分页
sessionStorage 浏览器窗口或分页（tab）关闭就会消失 仅对当前浏览器窗口或分页有效
检测浏览器是否支持WebStorage，语法如下：
if(typeof(Storage)=="undefined"){
<spanstyle="white-space:pre"></span>alert("您的浏览器不支持WebStorage");
}
else{
<spanstyle="white-space:pre"></span>//localStorage和sessionStorage程序代码
}
注意：IE和Firefox测试时需要把文件上传到服务器或者localhost才能运行。建议测试时使用GoogleChrome浏览器。
二、具体学习
1、访问localStorage
相同网站是指：协议、主机（domain与ip）、传输端口（port）都必须相同。
WebStorage只允许存储字符串数据，有以下3种访问localStorage的方法，前面的window可以不写
Storage对象的setItem和getItem方法（key："userdata"，value："HelloWorld"）
存储：window.localStorage.setItem(key,value);
读取：varv=window.localStorage.getItem(key);
数组索引
存储：window.localStorage[key]=value;
读取：varv=window.localStorage[key];
属性
存储：window.localStorage.key=value;
读取：varv=window.localStorage.key;
<spanstyle="font-size:14px;"><!DOCTYPEhtml>
<html>
<head>
<title>网页存储localStorage</title>
<scripttype="text/javascript">
functiononLoad(){
if(typeof(Storage)=="undefined"){
alert("Sorry！你的浏览器不支持WebStorage");
}
else{
btn_save.addEventListener("click",saveToLocalStorage);
btn_load.addEventListener("click",loadFromLocalStorage);
}
}
functionsaveToLocalStorage(){
<strong>localStorage.username=inputname.value;</strong>
}
functionloadFromLocalStorage(){
<strong>show_LocalStorage.innerHTML=localStorage.username+"你好，欢迎来到我的网站！";</strong>
}
</script>
</head>
<bodyonload="onLoad()">
请输入你的姓名：<inputtype="text"id="inputname"value=""/><br/>
<pid="show_LocalStorage"></p><br/>
<buttonid="btn_save">存储到localStorage</button>
<buttonid="btn_load">从localStorage读取数据</button>
</body>
</html></span><spanstyle="font-size:18px;">
</span>
二、删除localStorage
要想删除某一条localStorage数据，可以调用removeItem方法或者delete属性进行删除。
window.localStorage.removeItem("userdata");
deletewindow.localStorage.userdata;
delete.window.localStorage["userdata"];
要想删除全部的localStorage数据，可以使用clear()方法。
localStorage.clear();
<!DOCTYPEhtml>
<html>
<head>
<title>网页存储localStorage</title>
<scripttype="text/javascript">
functiononLoad(){
if(typeof(Storage)=="undefined"){
alert("Sorry！你的浏览器不支持WebStorage");
}
else{
btn_save.addEventListener("click",saveToLocalStorage);
btn_load.addEventListener("click",loadFromLocalStorage);
btn_clear.addEventListener("click",clearLocalStorage);
}
}
functionsaveToLocalStorage(){
localStorage.username=inputname.value;
}
functionloadFromLocalStorage(){
show_LocalStorage.innerHTML=localStorage.username+"你好，欢迎来到我的网站！";
}
functionclearLocalStorage(){
<strong>localStorage.clear();</strong>
show_LocalStorage.innerHTML=localStorage.username;
}
</script>
</head>
<bodyonload="onLoad()">
请输入你的姓名：<inputtype="text"id="inputname"value=""/><br/>
<pid="show_LocalStorage"></p><br/>
<buttonid="btn_save">存储到localStorage</button>
<buttonid="btn_load">从localStorage读取数据</button>
<buttonid="btn_clear">清除localStorage数据</button>
</body>
</html>
20d778d6ea2e72c0debf96707138b93d_Center.webp
三、访问sessionStorage
存储
window.sessionStorage.setItem(key,value);
window.sessionStorage[key]=[value];
window.sessionStorage.key=value;
读取
varv=window.sessionStorage.getItem(key);
varv=window.sessionStorage[key];
varv=window.sessionStorage.key;
清除
window.sessionStorage.removeItem(key);
deletewindow.sessionStorage.key;
deletewindow.sessionStorage[key];
//全部清除
sessionStorage.clear();
<spanstyle="font-size:14px;"><!DOCTYPEhtml>
<html>
<head>
<title>网页存储sessionStorage</title>
<scripttype="text/javascript">
functiononLoad(){
inputSpan.style.display='none';
if(typeof(Storage)=="undefined"){
alert("Sorry！你的浏览器不支持WebStorage");
}
else{
/*判断姓名是否已经存入localStorage，已存入时才执行{}内的命令*/
if(localStorage.username){
/*数据不存在时返回undefined*/
if(!localStorage.counter){
localStorage.counter=1;/*初始值设为1*/
}
else{
localStorage.counter++;/*递增*/
}
btn_login.style.display='none';/*隐藏“登录”按钮*/
show_LocalStorage.innerHTML=localStorage.username+"你好，这是你第"+localStorage.counter+"次来到网站";
}
btn_login.addEventListener("click",login);
btn_send.addEventListener("click",sendok);
btn_logout.addEventListener("click",clearLocalStorage);
}
}
functionsendok(){
localStorage.username=inputname.value;
location.reload();/*重载网页*/
}
functionlogin(){
inputSpan.style.display='';
}
functionclearLocalStorage(){
localStorage.clear();/*情况localStorage*/
show_LocalStorage.innerHTML="已成功注销！";
btn_login.style.display='';/*显示“登录”按钮*/
inputSpan.style.display='';/*显示姓名输入框和“提交”按钮*/
}
</script>
</head>
<bodyonload="onLoad()">
<buttonid="btn_login">登录</button>
<buttonid="btn_logout">注销</button><br/>
<spanid="inputSpan">请输入你的姓名：<inputtype="text"id="inputname"value=""/><buttonid="btn_send">提交</button></span><br/>
<pid="show_LocalStorage"></p><br/>
</body>
</html></span><spanstyle="font-weight:bold;font-size:24px;">
</span>
注：JavaScript里的运算符“+”不仅可以数字相加还可以字符串相加。例如"123"+456="123456"
上例中localStorage.counter++;如果改成localStorage.counter=localStorage.counter+1;就会出现”11111......“
JavaScript将字符串转换成为数字可以用Number()方法，localStorage.counter=Number(localStorage.counter)+1;
本文转载自中文网 |
最新内容
相关内容
python如何调用另一个文件夹中的内
python如何调用另一个文件夹中的内容?，系统，培训，文件，模块，内容，路径，函数，所在，前缀，语句，python中调用另外一个文件夹中的内容：1、同一文件
python如何安装一个模块
python如何安装一个模块，培训，工具，模块，方式，文件夹，源码，本文，下面，以上，之后，下面介绍几种安装Python模块的几种方式easy_install方式先下
python 培训之 object是什么类型
python 培训之 object是什么类型，培训，类型，实例，顶端，对象，关系，链条，父子，数据类型，属性，在Python的世界中，object是父子关系的顶端，所有的数
python注释一般放在什么位置
python注释一般放在什么位置，代码，位置，培训，注释，时间，引号，可能会，不可或缺，变量，语句，python写代码注释是一件很重要的事情，如果你写的一段
python能判断一个变量的类型吗
python能判断一个变量的类型吗，培训，类型，对象，变量，函数，实例，语法，以上，参数，结果，python中是可以判断对象的类型的，判断python中的对象类型
python一行多条语句怎么写
python一行多条语句怎么写，培训，代码，情况，语句，括号，末尾，空格，字符串，也就是，下面，在实际的开发过程中，换行编写代码是经常遇到的情况，下面来
python写代码怎么跳下一行
python写代码怎么跳下一行，培训，代码，括号，末尾，空格，字符串，也就是，对象，以上，两个，python里一行写不下，拆成多行，有两种办法：\和()两种方法在
python脚本和网页的区别是什么
python脚本和网页的区别是什么，网站，培训，设计，通用，标准，平台，网页，语言，脚本，标记，python是一种计算机程序设计语言，一种面向对象的动态类型
python可以做网页编程吗？
python可以做网页编程吗？，技术，公司，数据，网络，人工智能，工资，分析，工作，设计，市场，什么是Python? Python是一种计算机编程语言，也是一种
python版本2和3之间的区别是什么？
python版本2和3之间的区别是什么？，培训，区别，之间，版本，
pythonHTTP与HTTPS之间的区别
pythonHTTP与HTTPS之间的区别，培训，区别，之间，
pythonpycharm与Python一样不
pythonpycharm与Python一样不，环境，项目，数据，工具，培训，设计，代码，收费，语言，功能，python和pycharm是不一样的，二者有本质的区别。Python是一