HTML5网页存储的相关知识

2025-02-24 技术教程

这篇文章主要为大家详细介绍了HTML5网页存储的相关知识，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。

HTML5 网页存储 Web Storage

一、认识Web Storage

Web Storage是一种将少量数据存储在客户端（client）磁盘的技术。只要支持WebStorage API规格的浏览器，网页设计者都可以使用JavaScript来操作它，我们先了解一下Web Storage。

Web Storage的容量由客户端浏览器决定，通常1MB~5MB。

Web Storage纯粹运行客户端，不会每次网页请求连带发送给服务端。

Web Storage以一组key-value对应保存数据。

Web Storage提供两种方式将数据保存在客户端：一种是localStorage，一种是sessionStorage，两者的差异在于申明周期和有效范围。

表一 Web Storage类型的差异
Web Storage类型生命周期有效范围localStorage执行删除命令时才会消失同一网站的网页可以跨窗口和分页sessionStorage浏览器窗口或分页（tab）关闭就会消失仅对当前浏览器窗口或分页有效

检测浏览器是否支持Web Storage，语法如下：

if(typeof(Storage)=="undefined"){<span style="white-space:pre"></span>alert("您的浏览器不支持Web Storage");}else{<span style="white-space:pre"></span>//localStorage和sessionStorage程序代码}

注意：IE和Firefox测试时需要把文件上传到服务器或者localhost才能运行。建议测试时使用Google Chrome浏览器。

二、具体学习

1、访问localStorage

相同网站是指：协议、主机（domain与ip）、传输端口（port）都必须相同。

WebStorage只允许存储字符串数据，有以下3种访问localStorage的方法，前面的window可以不写

Storage对象的setItem和getItem方法（key："userdata"，value："Hello World"）

存储：window.localStorage.setItem(key,value);

读取：var v = window.localStorage.getItem(key);

数组索引

存储：window.localStorage[key] =value;

读取：var v = window.localStorage[key];

属性

存储：window.localStorage.key =value;

读取：var v = window.localStorage.key;

<span style="font-size:14px;"><!DOCTYPE html><html><head><title>网页存储localStorage</title><script type="text/javascript">function onLoad(){if(typeof(Storage)=="undefined"){alert("Sorry！你的浏览器不支持Web Storage");}else{btn_save.addEventListener("click",saveToLocalStorage);btn_load.addEventListener("click",loadFromLocalStorage);}}function saveToLocalStorage(){<strong>localStorage.username = inputname.value;</strong>}function loadFromLocalStorage(){<strong>show_LocalStorage.innerHTML = localStorage.username+"你好，欢迎来到我的网站！";</strong>}</script></head><body onload="onLoad()">请输入你的姓名：<input type="text" id="inputname" value="" /><br/><p id="show_LocalStorage"></p><br /><button id="btn_save">存储到localStorage</button><button id="btn_load">从localStorage读取数据</button></body></html></span><span style="font-size: 18px;"></span>

二、删除localStorage

要想删除某一条localStorage数据，可以调用removeItem方法或者delete属性进行删除。

window.localStorage.removeItem("userdata");

delete window.localStorage.userdata;

delete.window.localStorage["userdata"];

要想删除全部的localStorage数据，可以使用clear()方法。

localStorage.clear();

<!DOCTYPE html><html><head><title>网页存储localStorage</title><script type="text/javascript">function onLoad(){if(typeof(Storage)=="undefined"){alert("Sorry！你的浏览器不支持Web Storage");}else{btn_save.addEventListener("click",saveToLocalStorage);btn_load.addEventListener("click",loadFromLocalStorage);btn_clear.addEventListener("click",clearLocalStorage);}}function saveToLocalStorage(){localStorage.username = inputname.value;}function loadFromLocalStorage(){show_LocalStorage.innerHTML = localStorage.username+"你好，欢迎来到我的网站！";}function clearLocalStorage(){<strong>localStorage.clear();</strong>show_LocalStorage.innerHTML = localStorage.username;}</script></head><body onload="onLoad()">请输入你的姓名：<input type="text" id="inputname" value="" /><br/><p id="show_LocalStorage"></p><br /><button id="btn_save">存储到localStorage</button><button id="btn_load">从localStorage读取数据</button><button id="btn_clear">清除localStorage数据</button></body></html>

三、访问sessionStorage

存储

window.sessionStorage.setItem(key,value);

window.sessionStorage [key] = [value];

window.sessionStorage.key= value;

读取

var v = window.sessionStorage.getItem(key);

var v = window.sessionStorage [key];

var v = window.sessionStorage.key;

清除

window.sessionStorage.removeItem(key);

delete window.sessionStorage.key;

delete window.sessionStorage [key];

//全部清除

sessionStorage.clear();

<span style="font-size:14px;"><!DOCTYPE html><html><head><title>网页存储sessionStorage</title><script type="text/javascript">function onLoad(){inputSpan.style.display = 'none';if(typeof(Storage)=="undefined"){alert("Sorry！你的浏览器不支持Web Storage");}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);}}function sendok(){localStorage.username = inputname.value;location.reload();/*重载网页*/}function login(){inputSpan.style.display = '';}function clearLocalStorage(){localStorage.clear();/*情况localStorage*/show_LocalStorage.innerHTML = "已成功注销！";btn_login.style.display = '';/*显示“登录”按钮*/inputSpan.style.display = '';/*显示姓名输入框和“提交”按钮*/}</script></head><body onload="onLoad()"><button id="btn_login">登录</button><button id="btn_logout">注销</button><br /><span id="inputSpan">请输入你的姓名：<input type="text" id="inputname" value="" /><button id="btn_send">提交</button></span><br /><p id="show_LocalStorage"></p><br /></body></html></span><span style="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;

以上就是HTML5网页存储的相关知识的简略介绍，当然详细使用上面的不同还得要大家自己使用过才领会。如果想了解更多，欢迎关注亿速云行业资讯频道哦！