知识点：

1、设置sessionStorage----setItem：sessionStorage.setItem(key,data);

存储数据使用key是唯一，不可重复，每触发都生成；如用一个固定key变量名，触发多次会替换一直一个：var key = new Date().getTime();

2、获取sesstionStorage--getItem

var value= sessionStorage.getItem(key);

key(index)方法得到每i个key：var key = sessionStorage.key(i);

得到所有存储数据：var sum = sessionStorage.length;

3、for循环中删除sessionStorage用sessionStorage.removeItem(key);直接用sessionStorage.clear()替代；
 del.onclick=function(){

        var sum2= sessionStorage.length;

for(var i=sum2-1;i>=0;i--) {

                var  key = sessionStorage.key(i);

                sessionStorage.removeItem(key);

        }

    }

替换成简单的：

del.onclick=function(){

        sessionStorage.clear();//替代 for循环中的removeItem(key);

 }
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<input type="text" id ="txt"/>

<input  type ='button' id="btn" value="保存">

<input  type ='button' id="ready" value="读取">

<input  type ='button' id="del" value="删除">

<script>

    var btn = document.querySelector('#btn');

    var ready = document.querySelector('#ready');

    var del = document.querySelector('#del');

    //设置sessionStorage----setItem

    btn.onclick=function(){

        var data = document.querySelector('#txt').value;

        //存储数据使用key是唯一，不可重复，每触发都生成；如用一个固定key变量名，触发多次会替换一直一个

        var key = new Date().getTime();

        sessionStorage.setItem(key,data);

    }

    //获取sesstionStorage--getItem

    ready.onclick=function(){

        var arrs=[];

        //得到所有存储数据

      var sum = sessionStorage.length;

      for(var i=0;i<sum;i++){

          //得到每i个key

          var  key = sessionStorage.key(i);

          //根据key得到对应value

          var value= sessionStorage.getItem(key);

          // arrs.push(value);

          console.log(value)

      }

    }

    //删除sessionStorage--removeItem(key)/clear()

    del.onclick=function(){

        var sum2= sessionStorage.length;

        //for 循环i继续计数上一次，删除的数据也按上一次计数，不准，所有用倒数删除

    // for(var i=0;i<sum2;i++) {

        //删除一个数据，长度减去一个

for(var i=sum2-1;i>=0;i--) {

                var  key = sessionStorage.key(i);

                sessionStorage.removeItem(key);

        }

        sessionStorage.clear();//替代 for循环中的removeItem(key);

    }

</script>

</body>

</html>

sessionStorage：写入记事本功能[内容写入sessionStorage中，读取，删除]的更多相关文章

  1. 读取Excel二进制写入DB，并从DB中读取生成Excel文件

    namespace SendMailSMSService { class Program { static void Main(string[] args) { var connString = Sq ...

  2. python将excel数据写入数据库，或从库中读取出来

    首先介绍一下SQL数据库的一些基本操作: 1创建 2删除 3写入 4更新(修改) 5条件选择 有了以上基本操作,就可以建立并存储一个简单的数据库了. 放出python调用的代码: 此处是调用dos 操 ...

  3. python将对象写入文件，以及从文件中读取对象

    原文地址: http://www.voidcn.com/article/p-fqtqpwxp-wo.html 写入文件代码: >>> import sys, shelve >& ...

  4. JAVA基础-输入输出：1.编写TextRw.java的Java应用程序，程序完成的功能是：首先向TextRw.txt中写入自己的学号和姓名，读取TextRw.txt中信息并将其显示在屏幕上。

    1.编写TextRw.java的Java应用程序,程序完成的功能是:首先向TextRw.txt中写入自己的学号和姓名,读取TextRw.txt中信息并将其显示在屏幕上. package Test03; ...

  5. 程序一 用记事本建立文件src.dat，其中存放若干字符。编写程序，从文件src.dat中读取数据，统计其中的大写字母、小写字母、数字、其它字符的个数，并将这些数据写入到文件test.dat中。

    用记事本建立文件src.dat,其中存放若干字符.编写程序,从文件src.dat中读取数据,统计其中的大写字母.小写字母.数字.其它字符的个数,并将这些数据写入到文件test.dat中. #inclu ...

  6. 通俗易懂，C#如何安全、高效地玩转任何种类的内存之Span的脾气秉性(二)。 异步委托 微信小程序支付证书及SSL证书使用 SqlServer无备份下误删数据恢复 把list集合的内容写入到Xml中，通过XmlDocument方式写入Xml文件中 通过XDocument方式把List写入Xml文件

    通俗易懂,C#如何安全.高效地玩转任何种类的内存之Span的脾气秉性(二).   前言 读完上篇<通俗易懂,C#如何安全.高效地玩转任何种类的内存之Span的本质(一).>,相信大家对sp ...

  7. chattr和lsattr命令,不能被删除、改名、设定链接关系，同时不能写入或新增内容

    chattr和lsattr命令详解 chattr命令的作用很大,其中一些功能是由Linux内核版本来支持的,如果Linux内核版本低于2.2,那么许多功能不能实现.同样-D检查压缩文件中的错误的功能, ...

  8. (转)libcurl应用：如何把下载内容写入内存

    libcurl应用:如何把下载内容写入内存 2008-01-13 00:32:52|  分类: 默认分类 |举报 |字号 订阅   libcurl的文档中有 getinmemory.c这个例子,把下载 ...

  9. C#异步将文本内容写入文件

    在C#/.NET中,将文本内容写入文件最简单的方法是调用 File.WriteAllText() 方法,但这个方法没有异步的实现,要想用异步,只能改用有些复杂的 FileStream.WriteAsy ...

随机推荐

  1. UVALive - 3713 - Astronauts（图论——2-SAT）

    Problem   UVALive - 3713 - Astronauts Time Limit: 3000 mSec Problem Description Input The input cont ...

  2. redhat 6.5 安装和配置zabbix客户端

    一.安装zabbix-agent端 rpm -ivh http://repo.zabbix.com/zabbix/2.4/rhel/6/x86_64/zabbix-release-2.4-1.el6. ...

  3. 【原创】分布式事务之TCC事务模型

    引言 在上篇文章<老生常谈--利用消息队列处理分布式事务>一文中留了一个坑,今天来填坑.如下图所示 如果服务A和服务B之间是同步调用,比如服务C需要按流程调服务A和服务B,服务A和服务B要 ...

  4. python 判断网络通断同时检测网络的状态

    思路:通过http判断网络通断,通过ping获取网络的状态 注意:不同平台下,调用的系统命令返回格式可能不同,跨平台使用的时候,注意调整字符串截取的值 主程序:network_testing_v0.3 ...

  5. 08-JavaScript中的函数

    JavaScript中的函数 1.函数简介 函数:就是将一些语句进行封装,然后通过调用的形式,执行这些语句. 函数的作用: 将大量重复的语句写在函数里,以后需要这些语句的时候,可以直接调用函数,避免重 ...

  6. kettle变量（param命名参数）

    1.定义: 编辑-设置-命名参数 在当前界面下定义参数名称和缺省值. 2.引用:原始数据 通过${var}引用变量 输出 注:1.字符串在命名参数引用是需要添加单引号的,但位置参数是不需要进行转译: ...

  7. Mysql——Navicat 连接MySQL 8.0.11 出现2059错误

    原因 mysql8 之前的版本中加密规则是mysql_native_password,而在mysql8之后,加密规则是caching_sha2_password 解决 更改加密规则: mysql -u ...

  8. 4.ansible的delegate_to

    完成发布流程如下 first 修改nginx 配置文件下线 web1-2 使用 delegate_to 将默认hosts指定为 nginx主机 使用remote_user 将用户 锁定为 root s ...

  9. Windows Server 2016激活方法+密钥+遇到的问题及解决办法（摘抄）

    Windows Server 2016激活方法+密钥+遇到的问题及解决办法 2018年08月30日 13:47:34 Brozer 阅读数:28667   这两天公司准备部署Revit Server ...

  10. 【BZOJ5506】[GXOI/GZOI2019]旅行者（最短路）

    [BZOJ5506][GXOI/GZOI2019]旅行者(最短路) 题面 BZOJ 洛谷 题解 正着做一遍\(dij\)求出最短路径以及从谁转移过来的,反过来做一遍,如果两个点不由同一个点转移过来就更 ...