1. 知识点：
  2. 1、设置sessionStorage----setItem：sessionStorage.setItem(key,data);
  3. 存储数据使用key是唯一，不可重复，每触发都生成；如用一个固定key变量名，触发多次会替换一直一个：var key = new Date().getTime();
  4. 2、获取sesstionStorage--getItem
  5. var value= sessionStorage.getItem(key);
  6. key(index)方法得到每i个key：var key = sessionStorage.key(i);
  7. 得到所有存储数据：var sum = sessionStorage.length;
  8. 3、for循环中删除sessionStorage用sessionStorage.removeItem(key);直接用sessionStorage.clear()替代；
  1.  del.onclick=function(){
  2.         var sum2= sessionStorage.length;
  3. for(var i=sum2-1;i>=0;i--) {
  4.                 var  key = sessionStorage.key(i);
  5.                 sessionStorage.removeItem(key);
  6.         }
  7.  
  8.     }
  9. 替换成简单的：
  10. del.onclick=function(){
  11.         sessionStorage.clear();//替代 for循环中的removeItem(key);
  12.  }
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.  
  7. </head>
  8. <body>
  9. <input type="text" id ="txt"/>
  10. <input  type ='button' id="btn" value="保存">
  11. <input  type ='button' id="ready" value="读取">
  12. <input  type ='button' id="del" value="删除">
  13. <script>
  14.     var btn = document.querySelector('#btn');
  15.     var ready = document.querySelector('#ready');
  16.     var del = document.querySelector('#del');
  17.     //设置sessionStorage----setItem
  18.     btn.onclick=function(){
  19.         var data = document.querySelector('#txt').value;
  20.         //存储数据使用key是唯一，不可重复，每触发都生成；如用一个固定key变量名，触发多次会替换一直一个
  21.         var key = new Date().getTime();
  22.         sessionStorage.setItem(key,data);
  23.     }
  24.     //获取sesstionStorage--getItem
  25.     ready.onclick=function(){
  26.         var arrs=[];
  27.         //得到所有存储数据
  28.       var sum = sessionStorage.length;
  29.       for(var i=0;i<sum;i++){
  30.           //得到每i个key
  31.           var  key = sessionStorage.key(i);
  32.           //根据key得到对应value
  33.           var value= sessionStorage.getItem(key);
  34.           // arrs.push(value);
  35.           console.log(value)
  36.  
  37.       }
  38.     }
  39.  
  40.     //删除sessionStorage--removeItem(key)/clear()
  41.     del.onclick=function(){
  42.         var sum2= sessionStorage.length;
  43.         //for 循环i继续计数上一次，删除的数据也按上一次计数，不准，所有用倒数删除
  44.     // for(var i=0;i<sum2;i++) {
  45.         //删除一个数据，长度减去一个
  46. for(var i=sum2-1;i>=0;i--) {
  47.                 var  key = sessionStorage.key(i);
  48.                 sessionStorage.removeItem(key);
  49.         }
  50.         sessionStorage.clear();//替代 for循环中的removeItem(key);
  51.     }
  52. </script>
  53. </body>
  54. </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. 跨域 - 自定义 jsonp实现跨域

    问题:在现代浏览器中默认是不允许跨域. 办法:通过jsonp实现跨域   在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的.但是,在页面上引入不同域上的js脚本文件却是 ...

  2. Kubernetes - kubectl proxy

    最近在玩flink部署在k8s上,但是k8s以前没玩过,参照前几天写的文章可部署一个简单的k8shttps://www.cnblogs.com/felixzh/p/9726244.html 在参照fl ...

  3. gradle构建项目失败：Unzipping /home/.gradle/wrapper/dists/gradle-3.3-all/55gk2rcmfc6p2dg9u9ohc3hw9/gradle-3.3-all.zip to /home/.gradle/wrapper/dists/gradle-3.3-all/55gk2rcmfc6p2dg9u9ohc3hw9

    Unzipping /home/.gradle/wrapper/dists/gradle-3.3-all/55gk2rcmfc6p2dg9u9ohc3hw9/gradle-3.3-all.zip to ...

  4. 好程序员web前端开发测验之css部分

    好程序员web前端开发测验之css部分Front End Web Development Quiz CSS 部分问题与解答 Q: CSS 属性是否区分大小写? <p><font si ...

  5. SaaS服务和个性化需求，就不能鱼和熊掌兼得吗?

    随时随地.轻松高效,移动工作让人类的自由度最大化.但企业的移动化过程却不轻松:要综合考虑销售.产品.客服.市场销售.人力资源等错综复杂的流程和需求,以及原有IT系统.数据信息的对接. 千企千面,很难有 ...

  6. 001_python多进程实例

    一.工作中需要执行zk数据对比,需要按照机器进行并发,举例以下的例子 # coding:utf8 # !/usr/bin/python import time from multiprocessing ...

  7. （五）Cluster Health

    Let’s start with a basic health check, which we can use to see how our cluster is doing. We’ll be us ...

  8. git 入门（转）

    1. good https://github.com/521xueweihan/git-tips Git的奇技淫巧 2.如果之前未使用过 Git,可以学习 Git 小白教程入门 3.思维导图

  9. FineUIPro v5.1.0 发布了！

    FineUIPro v5.1.0 已发布,这已经是自 2014 年以来的第 31 个版本,4 年来精雕细琢,只为你来! 上个大版本新增了响应式布局,而这个版本主要是BUG修正,此外还增加了树控件的级联 ...

  10. Qt中的QWebView

    一.Webkit了解   Webkit是一个开源的浏览器引擎,chrome也使用了作为核心.Qt中对Webkit做了封装,主要有以下几个类: QWebView :最常用的类,作为一个窗体控件 QWeb ...