功能图如图所示：

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

点击读取后的结果图：

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

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

点击清空后的结果：

源代码：

<!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. RPi 3B Aduio 3.5mm output

    /********************************************************************** * RPi 3B Aduio 3.5mm output ...

  2. IC卡T0协议中的过程字与状态字

    T0协议中,IC卡收到命里头以后向TTL回传过程字或状态字SW1.SW2: TTL和IC卡在二者之间的命令和数据交换的任何时刻都必须知道数据流的方向和IO线路由谁驱动. 摘录参考:<中国金融集成 ...

  3. VUE2中使用mint-ui，日期选择picker

    首先页面引入需要使用的组件 import { DatetimePicker,Toast,Popup,Picker } from 'mint-ui'; methods部分 openPicker () { ...

  4. Devexpress Winform MVVM

    归纳总结备忘 Devexpress Winform MVVM Practice 前言 MVVM Devexpress 正文 databindings及 UI Triggers Command 委托Co ...

  5. 将文件夹下的所有csv文件存入数据库

    # 股票的多因子分层回测代码实现 import os import pymysql # import datetime, time # from config import * database_ta ...

  6. esxi5 的tart命令使用注意点

    esxi5.0 注意tar命令参数使用和centos6稍微有点不一样,注意下 注意需要把-f参数单独分离出来,紧接着文件.   而不能和cz命令一起用 ~ # touch abc.txt ~ # ec ...

  7. SpringBoot Web开发(3) WebMvcConfigurerAdapter过期替代方案

    springboot2.0中 WebMvcConfigurerAdapter过期替代方案 最近在学习尚硅谷的<springboot核心技术篇>,项目中用到SpringMVC的自动配置和扩展 ...

  8. os.rename 和os.replace

    f1 = open("hello.txt","w") f1.write("hello,my name is bobo.") f1.close ...

  9. Python Day5 模块 包

    一:区分Python文件的2种用途 1个Python文件的2种用途 1.1 当作脚本执行:        if __name__ == '__main__': 1.2 当作模块导入使用     if ...

  10. 轻松制作X86 OPENWRT USB启动盘

    本文介绍了一个x86 live USBi启动盘的制作方法. 该方法有如下特点: 1.  可在winXP/win 7/win vista上制作, U盘采用fat格式, 即使对于linux经验较少者, 也 ...