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 ...
随机推荐
- C#winform和百度API互动-----之读取中js的参数
上百度的API <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" c ...
- cnpm与npm指定有什么区别？
CNPM跟NPM用法完全一致,只是在执行命令时将故宫改为CNPM. 因为故宫安装插件是从国外服务器下载,受网络影响大,可能出现异常,如果故宫的服务器在中国就好了,所以我们乐于分享的淘宝团队干了这事来自 ...
- 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_06-vuejs研究-vuejs基础-v-on指令
3.v-on绑定一个按钮的单击事件 计算的按钮上加事件 点击计算的按钮,弹出的事件 定义一个Result的变量
- anconda + python 3.6安装(以前的anconda,anaconda和python版本对应关系)
anconda + python 3.6安装 anaconda + python3.6安装安装老版本带python3.6的anaconda安装老版本带python3.6的anacondaanacond ...
- SparkMLLib的简单学习
一. 简介 1. 机器学习中,可以将数据划分为连续数据和离散数据 a. 连续数据:可以取任何值,如房价 b. 离散数据:仅有少量特殊值,如一个房屋有2个或3个房间,但不能为2.75个房间 二. 创建向 ...
- （IStool）删除新版本已废弃但可能会影响新版本运行的文件夹/文件
需求:老版本服务器的某些文件或文件夹在新版本已弃用,新版本覆盖安装时需要将文件夹或文件删除 实现:覆盖安装完成后将对应目录下的文件删除 [InstallDelete] Type: files; Nam ...
- 最新 美图java校招面经 （含整理过的面试题大全）
从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.美图等10家互联网公司的校招Offer,因为某些自身原因最终选择了美图.6.7月主要是做系统复习.项目复盘.LeetCode ...
- SSH连接时root用户无法验证通过
解决办法是: vi /etc/ssh/sshd_config 找到 # Authentication: PermitRootLogin without passwd 改成 # Authenticati ...
- 关于element中的父子组件的传值问题
首先讲一下父子组件的传值问题. 这是大家很熟悉的一张图,讲述了父子组件传值的过程.父组件通过prop传值给子组件,子组件通过$emit给父组件发送消息来使父组件的prop发生变化.这都是老生常谈了.下 ...
- C# lambda查询带返回值
问题来源: <深入理解C#(第3版)> 11页 具体如下: var lists=new List<string>{"111","222" ...