功能图如图所示：

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

点击读取后的结果图：

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

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

点击清空后的结果：

源代码：

<!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. jQuery-1.样式篇---属性与样式

    jQuery的属性与样式之.attr()与.removeAttr() 每个元素都有一个或者多个特性,这些特性的用途就是给出相应元素或者其内容的附加信息.如:在img元素中,src就是元素的特性,用来标 ...

  2. export 和import使用

    在JavaScript ES6中,export与export default均可用于导出常量.函数.文件.模块等,你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方 ...

  3. 在Linux中执行.sh脚本，异常

    在Linux中执行.sh脚本,异常/bin/sh^M: bad interpreter: No such file or directory. 分析:这是不同系统编码格式引起的:在windows系统中 ...

  4. 国内优秀MVC开源框架jfinal简介

    JFinal简介 JFinal 项目开发始于2011年初,作者詹波(James Zhan)曾任搜格信息技术有限公司Java架构师,北京信息管理科学研究所CTO,现任微格网际(北京)科技有限公司联合创始 ...

  5. MySQL5.7.32 通用版本安装

    1 上传镜像,配置好yum源 2 下载MySQL相关的包 https://dev.mysql.com/downloads/mysql/ 3  解压安装: tar -zxvf mysql-5.7.23- ...

  6. IIS发布错误及解决

    HTTP 错误 403.14 - Forbidden  解决办法: 打开iis管理器,找到对应网站,并找到目录浏览,双击打开. 点击启用即可. HTTP 错误 500.19 - Internal Se ...

  7. Go Example--defer

    package main import ( "fmt" "os" ) func main() { f := createFile("/tmp/defe ...

  8. 一个nginx服务器配置多站点

    有时候你想在一台服务器上为不同的域名运行不同的站点.比如www.siteA.com作为博客,www.siteB.com作为论坛.你可以把两个域名的IP都解析到你的服务器上,但是没法在Nginx的根目录 ...

  9. html笔记汇总

    <html lang="en-us"> HTML标签的lang属性(language)指定当前页面所使用的自然语言,如zh.zh-cn.zh-tw.zh-hk.en.e ...

  10. webpack 中，importloaders 配置项的含义

    importLoaders:用于配置「css-loader 作用于 @import 的资源之前」有多少个 loader. 0 => no loaders (default); 1 => p ...