本篇内容介绍了“HTML5中怎么使用网络存储存储键值对的数据”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!1.使用本地存储
我们使用localStorage对象来访问本地存储,他返回存储对象,存储使用存储键值对的数据,,他有下面一些属性和方法:
clear():清楚存储的键值对数据;
getItem(
key(
长度:返回键值对的个数;
removeItem(
setItem(
[
存储对象允许我们存储密钥和值都是字符串形式的密钥值对数据,密钥是唯一的,意味着当我们使用setItem方法添加键值对时,如果key值已经存在的话,将实现更新的操作。
复制代码代码如下:
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>
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:返回发生改变的存储对象(是本地存储还是会话存储)
下面我们看个例子:
复制代码代码如下:
表{边界折叠:折叠;}
th,td {填充:4px;}
style>
head>
键 th> | oldValue th> | newValue th> | url 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来访问它。 复制代码代码如下:
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>
|
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:返回发生改变的存储对象(是本地存储还是会话存储)
下面我们看个例子:
复制代码代码如下:
表{边界折叠:折叠;}
th,td {填充:4px;}
style>
head>
键 th> | oldValue th> | newValue th> | url 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来访问它。 复制代码代码如下:
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>
|
var key = localStorage.key(i);
var val = localStorage.getItem(key);
tableElement.innerHTML + =’
html>
浏览器不能删除我们通过localStorage的创建的数据,除非用户删除它。
2.监听存储事件
通过本地存储存储的数据对同源的文档具有可见性,比如你打开两个镀铬浏览器访问同一个URL地址,在任何一个页面上创建的本地存储对另外一个页面也是可见的。但是如果用别的浏览器(如firefox)打开相同的网址地址,本地存储是不可见的,因为他们不同源了。来监听存储的内容发生改变的,下面我们看他包含的其他属性:
key:返回发生改变的键值;
oldValue:返回发生改变键值以前的值值;
newValue:返回发生改变键值新的值值;
网址:发生改变的URL地址;
storageArea:返回发生改变的存储对象(是本地存储还是会话存储)
下面我们看个例子:
复制代码代码如下:
表{边界折叠:折叠;}
th,td {填充:4px;}
style>
head>
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来访问它。
复制代码代码如下:
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中怎么使用网络存储存储键值对的数据”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注云技术网站,小编将为大家输出更多高质量的实用文章!
- 网络存储集群
- 存储网络
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@byun.c免费云主机、域名om进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。
猜你喜欢
- JavaScript如何处理内存泄漏
- JavaScript中padStart()和padEnd()方法有什么用
- nodejs实现对图片进行批量裁剪的方法
- node如何连接mysql数据库
- 如何使用html5实现简单的拖动功能
- 用jQuery做弹出窗口的方法
- Node的前端面试题有哪些
- ajax如何实时刷新处理
- JavaScript动画和CSS动画该如何选择
- css3中sticky不生效的解决方法
最新资讯
- Java中局部变量和成员变量有什么区别
- 如何通过Javascript脚本获取form和input内容
- String和List
间的相互转换 - 解决UnsupportedOperationException异常问题的方法
- springboot获取项目目录路径的方法
- C语言如何解决QString与QByteArray互相转换的问题
- TypeScript接口和类型有哪些区别
- JavaScript怎么快速关闭
- 怎么使用JAVAscript实现Excel
- java后台调用接口及处理跨域问题的方法是什么
相关推荐
- Android之网络数据存储
- 使用SharedPreferences存储数据
- html5中如何使用LocalStorage本地存储
- 基于js中的存储键值对以及注意事项介绍
- 怎么将MAC的文件存储至NAS网络存储
- HTML5中如何实现网络存储
- HTML5的存储功能和网络SQL怎么操作
- HTML5存储的方法
- HTML5中网络存储方法有哪些
- html5中如何使用localStorage中存储对象
相关标签
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中怎么使用网络存储存储键值对的数据”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注云技术网站,小编将为大家输出更多高质量的实用文章!
- 网络存储集群
- 存储网络
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@byun.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。
猜你喜欢
- JavaScript如何处理内存泄漏
- JavaScript中padStart()和padEnd()方法有什么用
- nodejs实现对图片进行批量裁剪的方法
- node如何连接mysql数据库
- 如何使用html5实现简单的拖动功能
- 用jQuery做弹出窗口的方法
- Node的前端面试题有哪些
- ajax如何实时刷新处理
- JavaScript动画和CSS动画该如何选择
- css3中sticky不生效的解决方法
最新资讯
- Java中局部变量和成员变量有什么区别
- 如何通过Javascript脚本获取form和input内容
- String和List
间的相互转换 - 解决UnsupportedOperationException异常问题的方法
- springboot获取项目目录路径的方法
- C语言如何解决QString与QByteArray互相转换的问题
- TypeScript接口和类型有哪些区别
- JavaScript怎么快速关闭
- 怎么使用JAVAscript实现Excel
- java后台调用接口及处理跨域问题的方法是什么
相关推荐
- Android之网络数据存储
- 使用SharedPreferences存储数据
- html5中如何使用LocalStorage本地存储
- 基于js中的存储键值对以及注意事项介绍
- 怎么将MAC的文件存储至NAS网络存储
- HTML5中如何实现网络存储
- HTML5的存储功能和网络SQL怎么操作
- HTML5存储的方法
- HTML5中网络存储方法有哪些
- html5中如何使用localStorage中存储对象
相关标签
var key = sessionStorage.key(i);
var val = sessionStorage.getItem(key);
tableElement.innerHTML + =“
html>
你在例3中做任何修改,例2的页面不会发生任何改变。“HTML5中怎么使用网络存储存储键值对的数据”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注云技术网站,小编将为大家输出更多高质量的实用文章!免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@byun.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。云技术公众号手机网站二维码Copyright Yisu Cloud Ltd. All Rights Reserved. 2018 版权所有广州云技术计算有限公司粤ICP备17096448号-1
粤公网安备 44010402001142号增值电信业务经营许可证编号:B1-20181529
这篇文章主要为大家展示了“css怎么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“css怎么用”这篇文章吧。 讲下css的使用 CSS:负责页面的美化和布局的控制 1.概念:Cascading Style She…