web storage

最新推荐文章于 2024-07-19 23:42:48 发布

crystalheting

最新推荐文章于 2024-07-19 23:42:48 发布

阅读量132

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/crystalheting/article/details/103663313

版权

web storage概述

在HTML5中，除了canvas元素之外，另一个新增的非常重要的功能是可以在用户端本地保存的web storage功能，之前可以使用cookies在客户端保存诸如用户名等简单用户信息，但通过长期使用，人们发现用cookies储存永久数据存在几个问题：
1、大小：cookies的大小被限制在4KB
2、带宽：cookies是随HTTP事务一起被发送的，因此会浪费一部分发送cookies时使用的带宽
3、复杂性:要正确的操纵cookies是很困难的
针对以上问题，HTML5 中，重新提供了一种在客户端本地数据的功能，他就是Web storage功能。
顾名思义，Web storage功能就是在Web上储存数据的功能，这里的储存是针对客户端本地而言的。具体分两种：
sessionstorage：
将数据保存在session对象中。session是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。
localstorage：
将数据保存在客户端本地的硬件设备（硬盘）中，即使浏览器被关闭了，该数据仍然存在，下一次打开浏览器访问网站时仍然可以继续使用。

HTML文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>web</title>
   <script src="data.js"></script>
</head>
<body>
<p id="msg"></p>
<input type="text" id="input">
<input type="button" value="保存数据" onclick="saveStorage('input')">
<input type="button" value="读取数据" onclick="loadStorage('msg')">
</body>
</html>

js文件：

function saveStorage(id){
   var target=document.getElementById(id);
   var str=target.value;
   sessionStorage.setItem("message",str);
}
function loadStorage(id){
    var target=document.getElementById(id);
    var msg=sessionStorage.getItem("message");
    target.innerHTML=msg;
}

效果：
在这里插入图片描述
两种存储方式相同的地方：
输入1并点击保存数据，右键单击检查元素，在本地存储里可看到存储数据

刷新后同样也可以读取数据并可在本地存储里可看到存储数据

两种存储方式不同的地方：
1、sessionStorage：
关闭当前浏览网页重新打开后，再次读取数据就为空：在这里插入图片描述
2、localStorage：
关闭当前页面重新在浏览器打开后，也可以再次读取数据：

并且检查元素时仍可以看到存储数据

只有清除浏览数据才能清空存储数据

crystalheting

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web storage

web storage概述在HTML5中，除了canvas元素之外，另一个新增的非常重要的功能是可以在用户端本地保存的web storage功能，之前可以使用cookies在客户端保存诸如用户名等简单用户信息，但通过长期使用，人们发现用cookies储存永久数据存在几个问题：1、大小：cookies的大小被限制在4KB2、带宽：cookies是随HTTP事务一起被发送的，因此会浪费一部分发送...
复制链接

扫一扫