功能图如图所示：

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

点击读取后的结果图：

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

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

点击清空后的结果：

源代码：

<!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. Ubuntu16.04上添加用户以及修改用户所属的组

    我的问题是这样的,我的本地的电脑上有一个用户以及一个用户组,我还想添加其他的用户,并且这个用户属于这个已有的用户组 <鸟哥的linux私房菜>针对的是centos系统,还是有一些不一样 实 ...

  2. 测试那些事儿—postman进阶使用与实战

    1.postman进阶使用 1)环境与变量: 备注:全局 和 局部 变量不会影响到变量的调用,区别在于局部变量对于非当前环境不能使用而已. a.当测试存在多个环境时,可以先设置一个环境,然后在此环境下 ...

  3. 编写简单的windows桌面计算器程序

    编译环境:VS2017 主文件为: #include "stdafx.h" #include "WindowsProject5.h" #include &quo ...

  4. GCD XOR(UVa 12716)

    题意:输入整数n(1<=n<=30000000),有多少对整数(a,b)满足1<=b<=a<=n,且gcd(a,b)=a xor b. 题解:设c=gcd(a,b),因为 ...

  5. PTA——蠕虫爬井

    PTA 7-46 爬动的蠕虫 #include<stdio.h> int main() { ; scanf("%d%d%d",&N,&U,&D) ...

  6. mvn package出现No compiler is provided in this environment. Perhaps you are running on a JRE rather than a JDK

    配置java环境变量时偷懒,没有定义%JAVA_HOME%,应该先定义这个变量,然后在path中新建%JAVA_HOME%\bin和%JAVA_HOME%\jre\bin

  7. 在html中做表格以及给表格设置高宽字体居中和表格线的粗细

    今天学习了如何用HTML在网页上做表格,对于我这种横列部分的属实有点麻烦,不过在看着表格合并单过格的时候我把整个表格看做代码就容易多了. 对于今天的作业让我学习了更多的代码,对于代码的应用希望更加熟练 ...

  8. Python Json & Pickle模块

    用于序列化的两个模块 Json,用于字符串 和 python数据类型间进行转换 Pickle,用于python特有的类型 和 python的数据类型间进行转换 Json模块提供了四个功能:dumps. ...

  9. istream不是std的成员

    如果报错信息为:istream不是std的成员,那么有两种可能 1.没有包含iostream库文件 2.#ifndef 和#endif使用错误,致使包含的iostream的头文件没有被主函数包含

  10. RabbitMQ 死信队列 延时

    package com.hs.services.config; import java.util.HashMap; import java.util.Map; import org.springfra ...