html键值对与名称值对的区别,使用网络存储存储键值对的数据-HTML5教程-优快云博客

本文介绍了网络存储技术，对比了localStorage和sessionStorage的使用方法、特性及区别，重点讲解了它们的存储机制、可见性和生命周期。通过实例展示了如何在浏览器中操作这两种存储类型，并讨论了与cookie的不同。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本节课的内容是介绍网络存储，使用它在浏览器里存储键值对的数据，功能上像以前的cookie一样，不过他更好，存储的数据可以大小。有两种类型的网络存储：本地存储和会话存储，他们使用相同的实现机制，只是可见性和生命周期不同

。1.使用本地存储

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

clear()：清楚存储的键值对数据；

getItem()：通过键获取值值；

key()：通过索引获取键值；

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

removeItem()：通过键移出指定数据；

setItem(，)：添加一个键值对，当指定键的键值对存在时，则实现更新操作；

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

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

复制代码代码如下：

示例 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 > div>

值： label> 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：返回发生改变的存储对象(是本地存储还是会话存储)

下面我们看个例子：

复制代码代码如下：

存储空间 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来访问它。

复制代码代码如下：

示例 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> div>

值： label> div>

添加 button>

清除 button>

div>

有 span>项目 p>

div>

项目计数： th>

- td>

tr>

table>

iframe>

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的页面不会发生任何改变。

总结：

sessionStorage的用于本地存储一个会话(会话)中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage的不是一种持久化的本地存储，仅仅是会话级别的存储。

localStorage的用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

网络storage和cookie的区别：Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是替换的，并且每次您请求一个新的页面的时候，这样的无形中浪费了大量资源，另外cookie还需要指定作用域，不可以跨域调用。另外，Web存储拥有setItem，getItem，removeItem，clear等方法，不像Cookie需要前端开发者自己封装的setCookie。，的getCookie还有，网页存储每个域(包括子域)有独立的存储空间，各个存储空间是完全独立的，因此不会造成数据混乱。

但是曲奇也是不可以或缺的：饼干的作用是与服务器进行交互，作为HTTP规范的一部分而存在，而Web存储仅仅是为了在本地“存储”数据而生。