功能图如图所示：

文本域中输入点击保存后的结果如图所示：

点击读取后的结果图：

选择山羊对应的按钮进行修改并点击保存后的结果：

选择山羊养对应的单选按钮进行删除操作后的结果图：

点击清空后的结果：

源代码：

<!DOCTYPE html>
<html xmlns:height="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <title>sessionStorage</title>

</head>

<body>
<textarea id="textArea" rows="10" cols="100"></textarea><br/>
<button id="reset" value="重置">重置</button>
<button id="restore" value="保存">保存</button>
<button id="read" value="读取">读取</button>
<button id="set" value="修改">修改</button>
<button id="del" value="删除">删除</button>
<button id="clear" value="清空">清空</button>
<br/>
<div id="show"></div>
<!--用来以表格形式展示利用sessionStorage存储的键值对-->
<input type="hidden" id="hidden"><!--隐藏区域，点击修改后会将单选按钮选中的键存储在它的value中，
以便在按下保存按钮触发事件时判断对应的键是否已经存在了，这块区域对用户是不可见的-->
</body>
</html>
<script type="text/javascript">
    var restore = document.getElementById("restore");
    var read = document.getElementById("read");
    var set = document.getElementById("set");
    var del = document.getElementById("del");
    var hidden = document.getElementById("hidden");
    var reset = document.getElementById("reset");
    var textArea = document.getElementById("textArea");

    //重置
    reset.onclick = function (event) {
        textArea.value = "";//重置即键对应的文本域的value设置位空
    };

    //保存
    restore.addEventListener("click", function () {
        var key = hidden.value;//取得隐藏区域的value
        if (!key) {//若为空或者位undefind，则将当前事件作为键
            key = new Date().getTime();//将时间作为键
        }
        var value = textArea.value;//文本域中输入的内容即为值
        sessionStorage.setItem(key, value);//设置操作
        hidden.value = "";//将hidden的value置为空，以免后面进行修改时出现hidden的value有值的情况发生
        alert("保存成功");
    });
    //读取
    read.onclick = reading;

    function reading() {
        var show = document.getElementById("show");
        //这里采用拼接字符串的形式，拼出html语句，最后再添加到show面板上面
        var str = "<table border='thin black solid'><tbody></tbody><tr><th> </th><th>key</th><th>value</th></tr>";
        for (var i = 0; i < sessionStorage.length; i++) {//遍历sessionStorage
            var key = sessionStorage.key(i);//通过索引值找到对应的键
            var value = sessionStorage.getItem(key);//通过键找到对应的值
            str += "<tr><td><input type='radio' name='radios'></td><td>" + key + "</td><td>" + value + "</td></tr>";
        }
        str += "</tbody></table>";
        show.innerHTML = str;//添加到show面板上面
    }

    //修改
    set.onclick = function () {
        var radios = document.getElementsByName("radios");//getElementsByName和getElementsByTagName是不一样的
        var value;
        for (var i = 0; i < radios.length; i++) {
            if (radios[i].checked) {
                var key = sessionStorage.key(i);//通过索引获得键
                value = sessionStorage.getItem(key);//通过键获得值
                textArea.value = value;//将值显示在文本域中
                hidden.value = key;//隐藏区的value设置为key，以便在保存的时候判断键是否存在
                break;
            }
        }
    };
    //删除
    del.addEventListener("click", function () {
        var radios = document.getElementsByName("radios");//getElementsByName和getElementsByTagName是不一样的
        for (var i = 0; i < radios.length; i++) {
            if (radios[i].checked) {
                var key = sessionStorage.key(i);
                sessionStorage.removeItem(key);//通过键删除键值对，键唯一
                reading();
                break;
            }
        }
    });

    //清除
    var clear = document.getElementById("clear");
    clear.addEventListener("click", function () {
        // for (var i = sessionStorage.length - 1; i >= 0; i--) {
        //     var key = sessionStorage.key(i);//通过索引值找到对应的键
        //     sessionStorage.removeItem(key);//通过键删除键值对，键唯一
        //     //这里注意每当删除一个之后，比删除索引大的索引值都会减一，
        //     // 所以不能使用（var i=0;i<length;i++）的形式，这样找到后面就会超出索引的范围
        //     var key = sessionStorage.key(i);//通过索引值找到对应的键
        //     sessionStorage.removeItem(key);//通过键删除键值对，键唯一
        // }
        sessionStorage.clear();//这一个方法就可以代替上面注释部分的所有代码
        reading();
    })

</script>

sessionStorage实现note的功能的更多相关文章

  1. sessionStorage：写入记事本功能[内容写入sessionStorage中，读取，删除]

    知识点: 1.设置sessionStorage----setItem:sessionStorage.setItem(key,data); 存储数据使用key是唯一,不可重复,每触发都生成:如用一个固定 ...

  2. QtQuick桌面应用程序开发指南 4)动态管理Note对象_B 5)加强外观 6)许多其他的改进

    4.2.2 Stateless(不管状态)JavaScript库 为了让开发轻松点, 使用一个JavaScript接口来和数据库交互是个好主意, 它在QML中提供了方便的方法; 在QtCreator中 ...

  3. 【原创】自己动手写工具----XSmartNote [Beta 3.0]

    一.前面的话 在动笔之前,一直很纠结到底要不要继续完成这个工具,因为上次给它码代码还是一年多之前的事情,参考自己动手写工具----XSmartNote [Beta 2.0],这篇博文里,很多园友提出了 ...

  4. 轻松实现localStorage本地存储

    相信大家都知道HTML5提供了localStorage和sessionStorage两个新功能,基于这两个功能我们可以实现web资源的离线和会话存储,如果你现在还在用Cookie来临时存储网络资源的话 ...

  5. java中的断言

     断言:也就是所谓的assertion,是jdk1.4后加入的新功能. 它主要使用在代码开发和测试时期,用于对某些关键数据的判断,如果这个关键数据不是你程序所预期的数据,程序就提出警告或退出. 当软件 ...

  6. Ceph常用命令

    目录 [1.环境准备] [2.部署管理] [3.集群扩容] [4.用户管理] [5.密钥环管理] [6.块设备管理] [7.快照管理] [8.参考链接] 简要说明: 最近心血来潮,对分布式存储感兴趣, ...

  7. ZCTF2015 pwn试题分析

    ZCTF的pwn赛题分析, PWN100 这道题与SCTF的pwn100玩法是一样的,区别在于这个要过前面的几个限制条件.不能触发exit(0).否则就不能实现溢出了. 依然是触发canary来lea ...

  8. VC6.0调试知识大全

    VC6.0调试知识大全 分类: C++ 2010-09-06 21:33 7080人阅读 评论(5) 收藏 举报 debuggingmfcfunctionmenumicrosoftdll My Not ...

  9. Spring Boot 2.2.2.RELEASE 版本中文参考文档【3.2 - 3.10】

    Spring Boot 2.2.2.RELEASE版本中文文档持续更新中~如有需要获取参考文档文件,关注公众号JavaSo,回复“参考文档”即可. 3.2 结构化代码 Spring Boot不需要任何 ...

随机推荐

  1. 1.3 解决pip使用异常问题

    1.3 解决pip使用异常问题 1.3.1 pip出现异常有一小部分童鞋在打开cmd输入pip后出现下面情况:Didnot provide a command Did not provide a co ...

  2. arduino uno r3的数据类型

    char 一个字节,存储一个字符值.字符文字用单引号写成:'A' unsigned char 无符号,一个字节 byte 一个字节,无符号数, int 2字节,这产生-32768至32767的范围. ...

  3. 2019西湖论剑网络安全技能大赛（大学生组）--奇怪的TTL字段（补充）

    鉴于有人不会将得到的16进制数据在winhex中转成图片,我在这里写一个详细的步骤. 首先就是将六张图片的十六进制数据找出并提取出来. 打开winhex,新建一个文档. 大小可以选1bytes 将数据 ...

  4. Ubuntu16.04安装YouCompleteMe

    1.要求vim的版本在7.4.143以上,支持python2/3,通过vim --version查看. 2.下载源码:  https://github.com/Valloric/YouComplete ...

  5. 学习笔记（二）--Lucene简介

    Lucene简介 最受欢迎的java开源全文搜索引擎开发工具包.提供了完整的查询引擎和索引引擎,部分文本分词引擎(英文与德文两种西方语言).Lucene的目的是为软件开发人员提供一个简单易用的工具包, ...

  6. alias重命名命令

    升级了openssh后,发现ctrl+l忽然无法清屏了. 如果需要清屏的话,就得执行clear,但我更喜欢简单粗暴的做法,于是想起alias命令 方式一: 如果只想在当前终端生效(exit该窗口终端后 ...

  7. js正则表达式讲的最好的

    https://www.cnblogs.com/chenmeng0818/p/6370819.html

  8. Linux（Centos7）下搭建SVN服务器

    操作系统: CentOS 7.6 64位 第一步:通过yum命令安装svnserve,命令如下: 检测svn是否安装: rpm -qa subversion #检查现有版本,如果输入命令后没有提示的话 ...

  9. Python变量以及类型

    变量的定义 在程序中,有时我们需要对2个数据进行求和,那么该怎样做呢? 大家类比一下现实生活中,比如去超市买东西,往往咱们需要一个菜篮子,用来进行存储物品,等到所有的物品都购买完成后,在收银台进行结账 ...

  10. putty安装和使用

    https://blog.csdn.net/l707941510/article/details/80520790