重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
本篇内容介绍了“HTML5中怎么使用网络存储存储键值对的数据”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
网站建设哪家好,找创新互联建站!专注于网页设计、网站建设、微信开发、成都微信小程序、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了临泽免费建站欢迎大家使用!
1.使用本地存储
我们使用localStorage对象来访问本地存储,他返回存储对象,存储使用存储键值对的数据,,他有下面一些属性和方法:
clear():清楚存储的键值对数据;
getItem(
key(
长度:返回键值对的个数;
removeItem(
setItem(
[
存储对象允许我们存储密钥和值都是字符串形式的密钥值对数据,密钥是唯一的,意味着当我们使用setItem方法添加键值对时,如果key值已经存在的话,将实现更新的操作。
复制代码代码如下:
<!DOCTYPE HTML>
body> * {float:left;}
表{border-colla ps e:合拢; margin-left:50px;}
, td {padding:4px;}
th {text-align:right;}
输入{border:细实黑; padding:2px;}
标签{min-width:50px; display:inline-block; text-align:right;}
#countmsg,#buttons {margin-left:50px; margin-top:5px; margin-bottom:5px;}
style>
head>
div>
有 span>项目 p>
div>
项目计数: th> | - td> tr> table> displayData(); var button = document.getElementsByTagName('button'); for(var i = 0; i button [i] .onclick = handleButtonPress; var value = document.getElementById('value')。value; localStorage.setItem(key,value); 休息; 案例'clear': localStorage.clear(); 休息; } displayData(); } 函数displayData(){ var tableElement = document.getElementById('data'); tableElement.innerHTML =''; var itemCount = localStorage.length; document.getElementById('count')。innerHTML = itemCount; for(var i = 0; i var key = localStorage.key(i); var val = localStorage.getItem(key); tableElement.innerHTML + =' html> 浏览器不能删除我们通过localStorage的创建的数据,除非用户删除它。 2.监听存储事件 通过本地存储存储的数据对同源的文档具有可见性,比如你打开两个镀铬浏览器访问同一个URL地址,在任何一个页面上创建的本地存储对另外一个页面也是可见的。但是如果用别的浏览器(如firefox)打开相同的网址地址,本地存储是不可见的,因为他们不同源了。来监听存储的内容发生改变的,下面我们看他包含的其他属性: key:返回发生改变的键值; oldValue:返回发生改变键值以前的值值; newValue:返回发生改变键值新的值值; 网址:发生改变的URL地址; storageArea:返回发生改变的存储对象(是本地存储还是会话存储) 下面我们看个例子: 复制代码代码如下: <!DOCTYPE HTML> 表{边界折叠:折叠;} th,td {填充:4px;} style> head> < th> storageArea th> tr> table> var tableElement = document.getElementById('data'); window.onstorage =函数(e){ var row =' 行+ =' 行+ =' 行+ =' 行+ =' 行+ =' tableElement.innerHTML + =行; } script> body> html> 我们在例1中增删改改存储的数据,会在例2页面上显示出来。例2在chrome浏览器中运行正常,firefox没有反应,其他浏览器没有测试。 运行结果: 3.使用session storage session storage在使用上和本地存储一样,只是他的访问性上只进入内部页面,并且页面关闭后会消失,我们通过sessionStorage来访问它。 复制代码代码如下: <!DOCTYPE HTML> body> * {float:left;} table {border-collapse:塌陷; margin-left:50px;} th,td { padding:4px;} th {text-align:right;} 输入{border:细实黑色; padding:2px;} 标签{min-width:50px; display:inline-block; text-align:right;} #countmsg ,#buttons {margin-left:50px; margin-top:5px; margin-bottom:5px;} style> head> div> 有 span>项目 p> div> tr> table> displayData(); var button = document.getElementsByTagName(“ button”); for(var i = 0; i button [i]。onclick = handleButtonPress; } 函数handleButtonPress(e){ 开关(e.target.id){ 案例'add': var key = document.getElementById(“ key”)。value; var value = document.getElementById(“ value”)。value; sessionStorage.setItem(key,value); 休息; 案例'clear': sessionStorage.clear(); 休息; } displayData(); } 函数displayData(){ var tableElement = document.getElementById('data'); tableElement.innerHTML =''; var itemCount = sessionStorage.length; document.getElementById('count')。innerHTML = itemCount; for(var i = 0; i var key = sessionStorage.key(i); var val = sessionStorage.getItem(key); tableElement.innerHTML + =“ html> 你在例3中做任何修改,例2的页面不会发生任何改变。 “HTML5中怎么使用网络存储存储键值对的数据”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章! |
---|