HTML5中怎么使用网络存储存储键值对的数据

发布时间：2022-03-09 10:48:10 来源：亿速云阅读：213 作者：iii 栏目：web开发

本篇内容介绍了“HTML5中怎么使用网络存储存储键值对的数据”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

1.使用本地存储

我们使用localStorage对象来访问本地存储，他返回存储对象，存储使用存储键值对的数据，，他有下面一些属性和方法：

clear（）：清楚存储的键值对数据；

getItem（<key>）：通过键获取值值；

key（<index>）：通过索引获取键值；

长度：返回键值对的个数；

removeItem（<key>）：通过键移出指定数据；

setItem（<key>，<value>）：添加一个键值对，当指定键的键值对存在时，则实现更新操作；

[<key>]：通过多重下标的方式，使用密钥获取指定的值值。

存储对象允许我们存储密钥和值都是字符串形式的密钥值对数据，密钥是唯一的，意味着当我们使用setItem方法添加键值对时，如果key值已经存在的话，将实现更新的操作。

复制代码代码如下：

<！DOCTYPE HTML>

<html>

<head>

<style>

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>

<body>

<div>

<div>

</ div>

</ div>

<tr>

</ tr>

</ table>

displayData（）;

var button = document.getElementsByTagName（'button'）;

for（var i = 0; i <button.length; 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 <itemCount; i ++）{

var key = localStorage.key（i）;

var val = localStorage.getItem（key）;

tableElement.innerHTML + ='<tr> <th>'+键+'：</ th> <td>'+ val +'</ td> </ tr>';

</ html>

浏览器不能删除我们通过localStorage的创建的数据，除非用户删除它。

2.监听存储事件

通过本地存储存储的数据对同源的文档具有可见性，比如你打开两个镀铬浏览器访问同一个URL地址，在任何一个页面上创建的本地存储对另外一个页面也是可见的。但是如果用别的浏览器（如firefox）打开相同的网址地址，本地存储是不可见的，因为他们不同源了。来监听存储的内容发生改变的，下面我们看他包含的其他属性：

key：返回发生改变的键值；

oldValue：返回发生改变键值以前的值值；

newValue：返回发生改变键值新的值值；

网址：发生改变的URL地址;

storageArea：返回发生改变的存储对象（是本地存储还是会话存储）

下面我们看个例子：

复制代码代码如下：

<！DOCTYPE HTML>

<html>

<head>

<style>

表{边界折叠：折叠；}

th，td {填充：4px；}

</ style>

</ head>

<body >

<tr>

<th> oldValue </ th>

<th> newValue </ th>

< th> storageArea </ th>

</ tr>

</ table>

var tableElement = document.getElementById（'data'）;

window.onstorage =函数（e）{

var row ='<tr>';

行+ =' <td>'+ e.key +'</ td>';

行+ ='<td>'+ e.oleValue +'</ td>';

行+ ='<td>'+ e.newValue +'</ td>';

行+ ='<td>'+ e.url +'</ td>';

行+ ='<td>'+（e.storageArea == localStorage）+'</ td> </ tr>';

tableElement.innerHTML + =行;

}

</ script>

</ body>

</ html>

我们在例1中增删改改存储的数据，会在例2页面上显示出来。例2在chrome浏览器中运行正常，firefox没有反应，其他浏览器没有测试。

运行结果：

3.使用session storage

session storage在使用上和本地存储一样，只是他的访问性上只进入内部页面，并且页面关闭后会消失，我们通过sessionStorage来访问它。

复制代码代码如下：

<！DOCTYPE HTML>

<html>

<head>

<style>

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>

<body>

<div>

<div>

</ div>

</ div>

<tr>

</ tr>

</ table>

displayData（）;

var button = document.getElementsByTagName（“ button”）;

for（var i = 0; i <button.length; 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 <itemCount; i ++）{

var key = sessionStorage.key（i）;

var val = sessionStorage.getItem（key）;

tableElement.innerHTML + =“ <tr> <th>” +键+“：</ th> <td>” + val +“ </ td> </ tr>

</ html>

你在例3中做任何修改，例2的页面不会发生任何改变。

“HTML5中怎么使用网络存储存储键值对的数据”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！

向AI问一下细节

HTML5中怎么使用网络存储存储键值对的数据

猜你喜欢

最新资讯

相关推荐

相关标签