web储存的初级运用
<html>
<head>
<meta charset="utf-8">
<title>web存储</title>
</head>
<body>
<p id="result"></p>
<div style="border: 2px dashed #ccc;width:320px;text-align:center;">
<label for="sitename">网站名(key)：</label>
<input type="text" id="sitename" name="sitename" class="text"/>
<br/>
<label for="siteurl">网 址(value)：</label>
<input type="text" id="siteurl" name="siteurl"/>
<br/>
<input type="button" onclick="save()" value="新增记录"/>
<hr/>
<label for="search_site">输入网站名：</label>
<input type="text" id="search_site" name="search_site"/>
<input type="button" onclick="find()" value="查找网站"/>
<p id="find_result"><br/></p>
</div>
<script>
//web储存主要利用Storage对象及IndexedDataBase API(web SQL DB 已废弃)
//ps:localStorage是Storage的实例
// globalStorage不是Storage的实例,globalStorage(location.host)才是
// sessionStorage只适合短暂的会话储存而不适合长期的存储，
// 长期存储可采用localStorage
//判断是否支持
if (typeof (Storage) !== "undefined") {
console.log("支持");
} else {
console.log("don't work");
}
//localStorage储存无时间限制
localStorage.sitename = "逗趣";//利用属性保存
document.querySelector("#result").innerHTML = `网站名:${localStorage.sitename}`;
localStorage.setItem("sitename",1);//利用方法保存
localStorage.setItem("sitename2",6);
console.log(localStorage.sitename);
localStorage.removeItem("sitename");//方法移除，也可利用属性移除
console.log(localStorage.sitename);
var name = localStorage.key(2);//索引
console.log(name);
//保存数据
function save() {
var siteurl = document.getElementById("siteurl").value;
var sitename = document.getElementById("sitename").value;
localStorage.setItem(sitename, siteurl);
alert("添加成功");
}
//查找数据
function find() {
var search_site = document.getElementById("search_site").value;
var sitename = localStorage.getItem(search_site);
var find_result = document.getElementById("find_result");
find_result.innerHTML = search_site + "的网址是：" + sitename;
}
</script>
</body>
</html>
web储存的初级运用的更多相关文章
- HTML5 的web储存: localStorage & sessionStorage
早期的浏览器使用cookie储存,HTML5新增web储存,包括:localStorage 和 sessiongStorage; localStorage:可以永久储存: sessionStorage ...
- shellKali Linux Web 渗透测试— 初级教程（第三课）
shellKali Linux Web 渗透测试— 初级教程(第三课) 文/玄魂 目录 shellKali Linux Web 渗透测试—初级教程(第三课) 课程目录 通过google hack寻找测 ...
- 1+x 证书 Web 前端开发初级理论考试（试卷8 ）
Web前端开发初级模拟测试卷(三) 共55道题 总分:200分 形考总分:0分 一.单选题共30题,60分 1.实现向右的红色三角形,样式实现正确的是( ) A <div class=" ...
- 1+x 证书 web 前端开发初级对应课程分析
响应国家号召 1+X 证书 Web 前端开发考试样题 官方QQ群 1+x 证书 web 前端开发初级对应课程分析 http://blog.zh66.club/index.php/archives/19 ...
- 1+x证书Web 前端开发初级——理论考试（试卷1）
1+x证书Web 前端开发初级——理论考试(试卷1) 一.单选题(每小题 2 分,共 30 小题,共 60 分) 1.HTML 语言中,设置表格中文字与边框距离的标签是() A.<table b ...
- web前端开发初级
Web 页面制作基础 Web 的相关概念 WWWWebsiteURLWeb StandardWeb BrowserWeb Server HTML 基础 标记语言从 HTML 到 XHTMLHTML 的 ...
- 一个简单的js计数器(web储存)。
<span id="countspan"></span> <a href="#" onclick="countNumbe ...
- web储存用户信息
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- [web建站] 极客WEB大前端专家级开发工程师培训视频教程
极客WEB大前端专家级开发工程师培训视频教程 教程下载地址: http://www.fu83.cn/thread-355-1-1.html 课程目录:1.走进前端工程师的世界HTML51.HTML5 ...
随机推荐
- Kontln的属性形式Getter和Setter
package loaderman.demo class Person { val name: String get() = "name" var v: Int = 0 var v ...
- Visual Studio Code 上java开发环境搭建
在把一些开源的SDK中java代码转成C#代码时经常需要写点java代码来实验下功能,装个Eclipse或IDEAs吧,好像也不太值当,所以用vs code搭个环境偶尔来实验下.以下: 1.下载并装好 ...
- OpenNESS，开源的边缘网络服务平台
目录 文章目录 目录 参考文章 OpenNESS 的电梯间演讲 OpenNESS 与 ETSI MEC Edge Controller Software 的功能清单 Edge Platform Sof ...
- 04Flutter仿京东商城项目 首页商品列表布局
Home.dart import 'package:flutter/material.dart'; import 'package:flutter_swiper/flutter_swiper.dart ...
- 阶段5 3.微服务项目【学成在线】_day04 页面静态化_01-页面静态化需求分析
上半部分就是静态化 业务流程如下: 1.获取模型数据 2.制作模板 3.对页面进行静态化 4.将静态化生成的html页面存放文件系统中 5.将存放在文件系统的html文件发布到服务器
- win7上 nginx 出现 403 Forbidden
一般是目录权限问题,在conf文件找到 location / { index index.html index.htm index.php;# autoindex on; } 把#去掉就可以了.
- Linux命令之ntpdate、hwclock
ntpdate用于同步系统时间.hwclock用于同步硬件时间. (1).ntpdate ntpdate [选项] [时间服务器] 一般直接ntpdate [时间服务器] 常用的时间服务器:ntp[1 ...
- 阿里开源支持缓存线程池的ThreadLocal Transmittable ThreadLocal(TTL)
功能 在使用线程池等会缓存线程的组件情况下,提供ThreadLocal值的传递功能. JDK的InheritableThreadLocal类可以完成父子线程值的传递. 但对于使用线程池等会缓存线程的组 ...
- jQuery ajax表单提交
Jquery的$.ajax方法可以实现ajax调用,要设置url,post,参数等. 如果要提交现有Form需要写很多代码,何不直接将Form的提交直接转移到ajax中呢. 以前的处理方法 如Form ...
- 使用apache commons csv解析del（类似csv）格式文件
del格式类似csv,我这里的测试文件test.del是从DB2数据库中导出来的一组数据. apache commons csv的maven坐标为: <!-- https://mvnreposi ...