时间:2021-07-01 10:21:17 帮助过:53人阅读
为了破解Cookie的一系列限制(主要是cookie的大小和多少都受限制,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用),HTML5通过JS的新的API就能直接存储大量的数据到客户端浏览器,而且支持复杂的本地数据库,让JS更有效率。HTML5支持两种的WebStorage:永久性的本地存储(localStorage),会话级别的本地存储(sessionStorage)。下面就让我们来了解一下HTML5如何使用Web Storage储存,介绍Web Storage储存的2种方式,希望对大家有所帮助!
一:localStorage(永久性的本地存储)
一直存储在本地,数据存储是永久的,除非用户或程序对其进行删除操作;localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。
特点:
① 域内安全、永久保存。即客户端或浏览器中来自同一域名的所有页面都可访问localStorage数据且数据除了删除否则永久保存,但客户端或浏览器之间的数据相互独立。
② 数据不会随着Http请求发送到后台服务器;
③ 存储数据的大小机会不用考虑,因为在HTML5的标准中要求浏览器至少要支持到4MB。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>localStorage</title> </head> <body> <script type="text/javascript"> //添加key-value 数据到 localStorage localStorage.setItem("localStorage", "http://127.0.0.1:8020"); //通过key来获取value var dt = localStorage.getItem("localStorage"); alert(dt); //清空所有的key-value数据。 //localStorage.clear(); alert(localStorage.length); </script> </body> </html>
效果图:
localStorage提供了四个方法来辅助我们进行对本地存储做相关操作。
(1)setItem(key,value):添加本地存储数据。两个参数,非常简单就不说了。
(2)getItem(key):通过key获取相应的Value。
(3)removeItem(key):通过key删除本地数据。
(4)clear():清空数据。
二.sessionStorage(会话级别的本地存储)
在会话期内有效,数据在浏览器关闭后自动删除;
特点:会话控制、短期保存。会话概念与服务器端的session概念相似,短期保存指窗口或浏览器或客户端关闭后自动消除数据。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>sessionStorage</title> </head> <body> <script type="text/javascript"> //添加key-value 数据到 sessionStorage sessionStorage.setItem("sessionStorage", "http://127.0.0.1:8020"); //通过key来获取value var dt = sessionStorage.getItem("sessionStorage"); alert(dt); //清空所有的key-value数据。 //sessionStorage.clear(); alert(sessionStorage.length); </script> </body> </html>
效果图:
sessionStorage提供了四个方法来辅助我们进行对本地存储做相关操作。
(1)setItem(key,value):添加本地存储数据。两个参数,非常简单就不说了。
(2)getItem(key):通过key获取相应的Value。
(3)removeItem(key):通过key删除本地数据。
(4)clear():清空数据。
以上就是HTML5如何使用Web Storage储存?Web Storage储存的2种方式(示例)的详细内容,更多请关注Gxl网其它相关文章!