HTML5本地存储

最新推荐文章于 2022-01-01 23:11:49 发布

原创最新推荐文章于 2022-01-01 23:11:49 发布 · 685 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #session #cookie #本地存储 #数据

HTML 5 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了WebStorage的概念及其相较于Cookie的优势，包括存储限制、带宽消耗和复杂性等方面的问题。详细讲解了sessionStorage和localStorage的区别及使用方法，并通过示例展示了如何在实际应用中设置、获取和删除数据。

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

Web Storage

cookies存储存在的一些问题

存储限制：cookie的大小被限制在4KB。

带宽：cookie是随HTTP事务一起被发送的，浪费带宽。

复杂性：要正确操作cookie是很困难的。

HTML5中提供了一种在客户端本地保存数据的功能，就是Web Storage.

Web Storage分为两种

sessionStorage
将数据保存在session对象中。所谓session,就是用户在浏览某个网站时，从进入网站到浏览器关闭所经历的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存这段时间内要求保存的任何数据。

localStorage

将数据保存在客户端本地的硬件设备（通常是硬盘，也可以是其他硬件设备）中，即使浏览器被关闭了，该数据任然存在，下次打开浏览器访问网站时仍可以继续使用了。这两者的区别在于，sessionStorage
是临时保存，而localStorage是永久保存。

Storage API

setItem():
设置数据，key\value类型，类型都是字符串
可以用获取属性的形式操作

getItem():
获取数据，通过key来获取到相应的value

removeItem():
删除数据，通过key来删除相应的value

clear():
删除全部存储的值

示例，在输入框中输入值，点击“设置”按钮将值保存，打开新窗口，点击“获取”会弹出保存的值，点击“删除”将数据删除，再点击“获取”无反应。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8" />
<title>本地存储示例</title>
<script>

window.onload = function(){
var aInput = document.getElementsByTagName('input');

aInput[0].onclick = function(){

    //sessionStorage : 临时性存储
    //localStorage : 永久性存储

    //window.sessionStorage.setItem('name',aInput[3].value);

    window.localStorage.setItem('name',aInput[3].value);

};

aInput[1].onclick = function(){

    //alert(window.sessionStorage.getItem('name'));

    alert(window.localStorage.getItem('name'));

};

aInput[2].onclick = function(){

    window.localStorage.removeItem('name');

    //window.localStorage.clear();  //删除全部数据

};

};

</script>
</head>

<body>
<input type="button" value="设置" />
<input type="button" value="获取" />
<input type="button" value="删除" />
<input type="text" />
</body>
</html>

Web Storage可作为简易本地数据库使用，将原本必须要保存在服务器上的数据转为保存在客户端本地，从而大大提高了Web应用程序的性能，减轻服务器的负担。在HTML5中内置了一个可以通过SQL语言来访问的数据库，可以像访问本地文件那样轻松地对内置数据库进行直接访问。