sessionStorage:写入记事本功能[内容写入sessionStorage中,读取,删除]
知识点:
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中,读取,删除]的更多相关文章
- 读取Excel二进制写入DB,并从DB中读取生成Excel文件
namespace SendMailSMSService { class Program { static void Main(string[] args) { var connString = Sq ...
- python将excel数据写入数据库,或从库中读取出来
首先介绍一下SQL数据库的一些基本操作: 1创建 2删除 3写入 4更新(修改) 5条件选择 有了以上基本操作,就可以建立并存储一个简单的数据库了. 放出python调用的代码: 此处是调用dos 操 ...
- python将对象写入文件,以及从文件中读取对象
原文地址: http://www.voidcn.com/article/p-fqtqpwxp-wo.html 写入文件代码: >>> import sys, shelve >& ...
- JAVA基础-输入输出:1.编写TextRw.java的Java应用程序,程序完成的功能是:首先向TextRw.txt中写入自己的学号和姓名,读取TextRw.txt中信息并将其显示在屏幕上。
1.编写TextRw.java的Java应用程序,程序完成的功能是:首先向TextRw.txt中写入自己的学号和姓名,读取TextRw.txt中信息并将其显示在屏幕上. package Test03; ...
- 程序一 用记事本建立文件src.dat,其中存放若干字符。编写程序,从文件src.dat中读取数据,统计其中的大写字母、小写字母、数字、其它字符的个数,并将这些数据写入到文件test.dat中。
用记事本建立文件src.dat,其中存放若干字符.编写程序,从文件src.dat中读取数据,统计其中的大写字母.小写字母.数字.其它字符的个数,并将这些数据写入到文件test.dat中. #inclu ...
- 通俗易懂,C#如何安全、高效地玩转任何种类的内存之Span的脾气秉性(二)。 异步委托 微信小程序支付证书及SSL证书使用 SqlServer无备份下误删数据恢复 把list集合的内容写入到Xml中,通过XmlDocument方式写入Xml文件中 通过XDocument方式把List写入Xml文件
通俗易懂,C#如何安全.高效地玩转任何种类的内存之Span的脾气秉性(二). 前言 读完上篇<通俗易懂,C#如何安全.高效地玩转任何种类的内存之Span的本质(一).>,相信大家对sp ...
- chattr和lsattr命令,不能被删除、改名、设定链接关系,同时不能写入或新增内容
chattr和lsattr命令详解 chattr命令的作用很大,其中一些功能是由Linux内核版本来支持的,如果Linux内核版本低于2.2,那么许多功能不能实现.同样-D检查压缩文件中的错误的功能, ...
- (转)libcurl应用:如何把下载内容写入内存
libcurl应用:如何把下载内容写入内存 2008-01-13 00:32:52| 分类: 默认分类 |举报 |字号 订阅 libcurl的文档中有 getinmemory.c这个例子,把下载 ...
- C#异步将文本内容写入文件
在C#/.NET中,将文本内容写入文件最简单的方法是调用 File.WriteAllText() 方法,但这个方法没有异步的实现,要想用异步,只能改用有些复杂的 FileStream.WriteAsy ...
随机推荐
- 在 Xshell 中 使用 hbase shell 进入后 无法删除
在 Xshell 中 使用 hbase shell 进入后 无法删除 问题: 在hbase shell下,误输入的指令不能使用backspace和delete删除,使用过的人都知道,这是有多坑,有多苦 ...
- android开发学习 ------- 关于getSupportFragmentManager()不可用的问题
在Android开发中,少不了Fragment的运用. 目前在实际运用中,有v-4包下支持的Fragment以及app包下的Fragment,这两个包下的FragmentManager获取方式有点区别 ...
- Stream02
import 'package:flutter/material.dart';import 'dart:async';import 'dart:math'; void main()=>runAp ...
- C#7.0中的解构功能---Deconstruct
解构元组 C#7.0新增了诸多功能,其中有一项是新元组(ValueTuple),它允许我们可以返回多个值,并且配合解构能更加方便的进行工作,如下面例子 static void Main(string[ ...
- PyInstaller Extractor安装和使用方法
PyInstaller Extractor是可以提取出PyInstaller所创建的windows可执行文件的资源内容. 关于PyInstaller的介绍:PyInstaller安装使用方法 使用Py ...
- [Oracle运维工程师手记] 如何从trace 文件,判断是否执行了并行
[Oracle运维工程师手记系列]如何从trace 文件,判断是否执行了并行 客户说,明明指定了并行的hint,OEM 却报说没有并行,并且提供了画面. 客户的SQL文长这样: INSERT/*+ p ...
- PS图片后期之超简易造光调色方法
技法是死的,而人是活的,说的简单一点就是我们要学会开拓一下思维,调色的方法并不是只有[可选颜色]而已. 在修片之前,我们先要学会分析,在拍摄这一组照片时我希望有一种夕阳的光穿透晒在脸庞的感觉,而左边的 ...
- 爬zol村壁纸篇
# -*- coding: utf-8 -*- # @Author : Jackzz import requests,os from pyquery import PyQuery as pq def ...
- C++/CLI泛型应用
2019年01月16日, QQ群友不知道要折腾什么, 提出了以下问题: 样例代码中的是C#语言写的, 翻译成C++/CLI就不会了, 于是我试着谢了一下, 发现可以实现, 于是就贴出来与大家分享, 源 ...
- Assignment HDU - 2853(求最小改变边数)
Assignment Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total ...