HTML5 简单的Web 存储(localStorage)

it2026-01-22  10

HTML5 web 存储,一个比cookie更好的本地存储方式。 使用HTML5可以在本地存储用户的浏览数据。 客户端存储数据的两个对象为: localStorage - 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除。 sessionStorage - 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。 在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage: if(typeof(Storage)!=="undefined"){ // 支持 localStorage sessionStorage 对象! // 代码..... } else { // 不支持 web 存储。 } <div id="result"></div> <script> /*   实例解析:   使用 key="setname" 和 value="" 创建一个 localStorage 键/值对。   检索键值为"setname" 的值然后将数据插入 id="result"的元素中。 */ if(typeof(Storage)!=="undefined"){ localStorage.setname="乐视体育"; document.getElementById("result").innerHTML="网站名:"+localStorage.setname; }else{ document.getElementById("result").innerHTML="对不起,您的浏览器不支持web存储。"; } </script> <script> /*      不管是 localStorage,还是 sessionStorage, 可使用的API都相同,常用的有如下几个(以localStorage为例): 保存数据:localStorage.setItem(key,value); 读取数据:localStorage.getItem(key); 删除单个数据:localStorage.removeItem(key); 删除所有数据:localStorage.clear(); 得到某个索引的key:localStorage.key(index); */ if(typeof(Storage)!=="undefined"){ localStorage.setItem('Le',"乐视体育"); document.getElementById("result").innerHTML="网站 名:"+localStorage.getItem('Le'); document.getElementById("result").οnclick=function(){ localStorage.removeItem('Le'); //localStorage.clear();慎重使用会删除所有数据 } }else{ document.getElementById("result").innerHTML="对不起,您的浏览器不支持web存储。"; } //继续sessionStore var arr = [1,2,3]; var str = JSON.stringify(arr); window.sessionStorage.setItem('arr', str); //保存数据 var val = sessionStorage.getItem('arr'); //读取数据 var array = JSON.parse(val); </script>

转载于:https://www.cnblogs.com/yscode/p/9982216.html

最新回复(0)