HTML5中怎么使用网络存储存储键值对的数据
本篇内容介绍了“HTML5中怎么使用网络存储存储键值对的数据”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
网站建设哪家好,找创新互联建站 !专注于网页设计、网站建设、微信开发、成都微信小程序、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了临泽免费建站 欢迎大家使用!
1.使用本地存储
我们使用localStorage对象来访问本地存储,他返回存储对象,存储使用存储键值对的数据,他有下面一些属性和方法:
clear():清楚存储的键值对数据;
getItem():通过键获取值值;
key():通过索引获取键值;
长度:返回键值对的个数;
removeItem():通过键移出指定数据;
setItem(,):添加一个键值对,当指定键的键值对存在时,则实现更新操作;
[]:通过多重下标的方式,使用密钥获取指定的值值。
存储对象允许我们存储密钥和值都是字符串形式的密钥值对数据,密钥是唯一的,意味着当我们使用setItem方法添加键值对时,如果key值已经存在的话,将实现更新的操作。
复制代码代码如下:
<!DOCTYPE HTML>
示例 title>
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>
键: label > <输入id =“ key”占位符=“ Enter Key” /> div>
值: label> <输入id =“ value”占位符=“输入值” /> div>
添加 button>
清除 button>
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 + ='
'+键+': th> '+ val +' td> tr>'; html>
浏览器不能删除我们通过localStorage的创建的数据,除非用户删除它。
2.监听存储事件
通过本地存储存储的数据对同源的文档具有可见性,比如你打开两个镀铬浏览器访问同一个URL地址,在任何一个页面上创建的本地存储对另外一个页面也是可见的。但是如果用别的浏览器(如firefox)打开相同的网址地址,本地存储是不可见的,因为他们不同源了。来监听存储的内容发生改变的,下面我们看他包含的其他属性:
key:返回发生改变的键值;
oldValue:返回发生改变键值以前的值值;
newValue:返回发生改变键值新的值值;
网址:发生改变的URL地址;
storageArea:返回发生改变的存储对象(是本地存储还是会话存储)
下面我们看个例子:
复制代码代码如下:
<!DOCTYPE HTML>
存储空间 title>
表{边界折叠:折叠;}
th,td {填充:4px;}
style>
head>
键 th>
oldValue th>
newValue th>
url th>< th> storageArea th>
tr>
table>
var tableElement = document.getElementById('data');
window.onstorage =函数(e){
var row ='
';行+ ='
'+ e.key +' td>';行+ ='
'+ e.oleValue +' td>';行+ ='
'+ e.newValue +' td>';行+ ='
'+ e.url +' td>';行+ ='
'+(e.storageArea == localStorage)+' td> tr>';tableElement.innerHTML + =行;
}
script>
body>
html>
我们在例1中增删改改存储的数据,会在例2页面上显示出来。例2在chrome浏览器中运行正常,firefox没有反应,其他浏览器没有测试。
运行结果:
3.使用session storage
session storage在使用上和本地存储一样,只是他的访问性上只进入内部页面,并且页面关闭后会消失,我们通过sessionStorage来访问它。
复制代码代码如下:
<!DOCTYPE HTML>
示例 title>
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>
键: label> <输入id =“ key” placeholder =“ Enter Key” /> div>
值: label> <输入id =“ value”占位符=“输入值” /> div>
添加 button>
清除 button>
div>
有 span>项目 p>
div>
项目计数: th>
- td> 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 + =“
” +键+“: th> ” + val +“ td> tr> html>
你在例3中做任何修改,例2的页面不会发生任何改变。
“HTML5中怎么使用网络存储存储键值对的数据”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!
新闻标题:HTML5中怎么使用网络存储存储键值对的数据
本文路径:http://www.tsicrk.com/article/jdihej.html
基本
文件
流程
错误
SQL
调试
请求信息 : 2026-05-19 23:36:59 HTTP/1.1 GET : /article/jdihej.html 运行时间 : 1.0476s ( Load:0.0066s Init:0.0770s Exec:0.9549s Template:0.0092s ) 吞吐率 : 0.95req/s 内存开销 : 2,239.01 kb 查询信息 : 12 queries 5 writes 文件加载 : 36 缓存信息 : 0 gets 0 writes 配置加载 : 130 会话信息 : SESSION_ID=2f93e0bck553mlmi5qrc5lu1i6
/www/wwwroot/tsicrk.com/index.php ( 1.09 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/ThinkPHP.php ( 4.61 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/Think.class.php ( 12.26 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/Storage.class.php ( 1.37 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/Storage/Driver/File.class.php ( 3.52 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Mode/common.php ( 2.82 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Common/functions.php ( 53.56 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/Hook.class.php ( 4.01 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/App.class.php ( 13.49 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/Dispatcher.class.php ( 14.79 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/Route.class.php ( 13.36 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/Controller.class.php ( 11.23 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/View.class.php ( 7.59 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Behavior/BuildLiteBehavior.class.php ( 3.68 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Behavior/ParseTemplateBehavior.class.php ( 3.88 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Behavior/ContentReplaceBehavior.class.php ( 1.91 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Conf/convention.php ( 11.15 KB ) /www/wwwroot/tsicrk.com/App/Common/Conf/config.php ( 2.14 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Lang/zh-cn.php ( 2.55 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Conf/debug.php ( 1.49 KB ) /www/wwwroot/tsicrk.com/App/Home/Conf/config.php ( 0.31 KB ) /www/wwwroot/tsicrk.com/App/Home/Common/function.php ( 3.33 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Behavior/ReadHtmlCacheBehavior.class.php ( 5.62 KB ) /www/wwwroot/tsicrk.com/App/Home/Controller/ArticleController.class.php ( 6.02 KB ) /www/wwwroot/tsicrk.com/App/Home/Controller/CommController.class.php ( 1.60 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/Model.class.php ( 60.11 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/Db.class.php ( 32.43 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/Db/Driver/Pdo.class.php ( 16.74 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/Cache.class.php ( 3.83 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/Cache/Driver/File.class.php ( 5.87 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/Template.class.php ( 28.16 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/Template/TagLib/Cx.class.php ( 22.40 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/Template/TagLib.class.php ( 9.16 KB ) /www/wwwroot/tsicrk.com/App/Runtime/Cache/Home/7540f392f42b28b481b30614275e4e55.php ( 17.71 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Behavior/WriteHtmlCacheBehavior.class.php ( 0.97 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Behavior/ShowPageTraceBehavior.class.php ( 5.24 KB )
[ app_init ] --START-- Run Behavior\BuildLiteBehavior [ RunTime:0.000005s ] [ app_init ] --END-- [ RunTime:0.000030s ] [ app_begin ] --START-- Run Behavior\ReadHtmlCacheBehavior [ RunTime:0.000270s ] [ app_begin ] --END-- [ RunTime:0.000289s ] [ view_parse ] --START-- [ template_filter ] --START-- Run Behavior\ContentReplaceBehavior [ RunTime:0.000059s ] [ template_filter ] --END-- [ RunTime:0.000081s ] Run Behavior\ParseTemplateBehavior [ RunTime:0.006357s ] [ view_parse ] --END-- [ RunTime:0.006385s ] [ view_filter ] --START-- Run Behavior\WriteHtmlCacheBehavior [ RunTime:0.000158s ] [ view_filter ] --END-- [ RunTime:0.000172s ] [ app_end ] --START--
1064:You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ') LIMIT 1' at line 1
[ SQL语句 ] : SELECT `id`,`pid`,`navname` FROM `cx_nav` WHERE ( id= ) LIMIT 1 1064:You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ') LIMIT 1' at line 1
[ SQL语句 ] : SELECT `id`,`navname` FROM `cx_nav` WHERE ( id= ) LIMIT 1 1064:You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ')' at line 1
[ SQL语句 ] : SELECT `id`,`navname` FROM `cx_nav` WHERE ( pid= ) [8] Undefined index: pid /www/wwwroot/tsicrk.com/App/Home/Controller/ArticleController.class.php 第 47 行. [8] Undefined index: db_host /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/Db.class.php 第 120 行. [8] Undefined index: db_port /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/Db.class.php 第 121 行. [8] Undefined index: db_name /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/Db.class.php 第 122 行.
1.0476s