【Html5每日练习】本地存储之sessionStorage

系统管理员 2022-06-13 12:21 188阅读 0赞

Html5很强大，不仅添了新的选择器，而且还加了一个Web Storage，以前使用cookies总让我感到不爽，不过在这里我就侮辱它了，好歹也存活了那么多年了，今天就让我们来领略一下html5的风骚

<!DOCTYPE html>
    <html lang="en-US">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <input type="text" class="text" id="text" />
    <input type="button" value="保存数据" οnclick="setData();" />
    <input type="button" value="获取数据" οnclick="getData();" />
      
    <script>
    	var dataArr = [];
    	var ele = document.getElementsByClassName("text")[0];  //利用类选择器获得元素
    	function setData()
    	{
    		var data = ele.value; 
    		dataArr.push(data);
    		if("" == data)
    			alert("输入信息不能为空");
    		else
    		{
    			sessionStorage.setItem("boia",dataArr);
    			alert("信息已保存到date字段中");
    		}
    	}
    
    	function getData()
    	{
    		var data = sessionStorage.getItem("boia");
    		if("" == data || null == data)
    			alert("无数据");
    		else
    			alert("保存的数据是:"+data);
    	}
    </script>  
    </html>

这里我故意用了类选择器，还有一些CSS选择器的API函数，在这里我就不多说了，代码很简单，用了一个数组保存了用户输入的文本信息，然后将此数组里的数据用setItem()送到了浏览器，最后用getItem将数据读出来。

发表评论取消回复

表情：

评论列表（有 0 条评论，188人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML5 Web存储数据(localStorage,sessionStorage)

客户端存储数据的之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也

布满荆棘的人生/ 2023年10月17日 11:46/ 0 赞/ 1 阅读

相关 HTML5本地存储localStorage，sessionStorage

HTML5新特性，用于本地存储， localStorage：不删除会一直存在斯基 sessionStorage：浏览器关掉，就跪了 / H5:数据存储

﹏ヽ暗。殇╰゛Y/ 2023年10月06日 09:11/ 0 赞/ 5 阅读

相关 HTML5本地存储 LocalStorage和SessionStorage

了解HMLT5的同学，对本地存储的强大功能应该都不会陌生，因为它比之前的cookie和session实在是好用太多了。。。 Cookies的用法相对比较麻烦，并且还有个

拼搏现实的明天。/ 2022年09月28日 13:25/ 0 赞/ 237 阅读

相关 HTML5存储数据----sessionStorage保存与读取临时数据

<!doctype html> <html> <head> <meta charset="utf-8"> <title>使用sessionStorage保存与读

素颜马尾好姑娘i/ 2022年09月19日 12:29/ 0 赞/ 181 阅读

相关 HTML5 Web存储 sessionStorage localStorage

sessionStorage :浏览器关闭会清除 localStorage：长时间保存 api一致：代码： <!DOCTYPE html> <h

曾经终败给现在/ 2022年07月19日 06:36/ 0 赞/ 244 阅读

相关【Html5每日练习】本地存储localStorage

上一篇博文中讲到了sessionStorage，今天来练习一下localStorage，其实localStorage很简单，只要将对象改一下就行，看代码 <

落日映苍穹つ/ 2022年06月13日 12:21/ 0 赞/ 256 阅读

相关【Html5每日练习】本地存储之sessionStorage

Html5很强大，不仅添了新的选择器，而且还加了一个Web Storage，以前使用cookies总让我感到不爽，不过在这里我就侮辱它了，好歹也存活了那么多年了，今天就让我们来

系统管理员/ 2022年06月13日 12:21/ 0 赞/ 189 阅读

相关 HTML5之localStorage、sessionStorage

一、localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除没有时间限制的数据存储（一）设置值 1.　　localStor

你的名字/ 2022年04月17日 03:10/ 0 赞/ 463 阅读

相关 HTML5 Web 存储（localStorage和sessionStorage）

[原文链接][Link 1] HTML5 Web 存储是本地存储，存储在客户端，包括localStorage和sessionStorage。HTML5 Web 存储是以键/值

Love The Way You Lie/ 2021年12月01日 13:26/ 0 赞/ 272 阅读

相关 HTML5 localStorage and sessionStorage

TML5 提供两种web存储方法，localStorage 与 sessionStorage localStorage 与 sessionStorage 区别

忘是亡心i/ 2021年10月08日 06:52/ 0 赞/ 336 阅读