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 ...
随机推荐
- .NET笔记题库（一）
1 (1)面向对象的语言具有__继承性_性._封装性_性._多态性 性. (2)能用foreach遍历访问的对象需要实现 _ IEnumerable 接口或声明_ GetEnumerator 方法的类 ...
- vim 快捷键 清空文件所有内容
vim清空文件所有内容 在使用vim编辑器的时候,有时候编辑一个文件,而文件内容比较多,如果需要快速清空整个文件,可以使用一下命令: 在命令模式下,首先执行 gg 这里是跳至文件首行 再执行: dG ...
- Socket概述
Socket套接字概述: 网络上具有唯一标识的IP地址和端口号组合在一起才能构成唯一能识别的标识符套接字. 通信的两端都有Socket. 网络通信其实就是Socket间的通信. 数据在两个Socket ...
- JMX简介及was上的使用
参考文章:https://www.ibm.com/developerworks/cn/websphere/library/techarticles/0908_sunyan_jmxdeploy/inde ...
- Qt编写自定义控件35-GIF录屏控件
一.前言 在平时的写作过程中,经常需要将一些操作动作和效果图截图成gif格式,使得涵盖的信息更全面更生动,有时候可以将整个操作过程和运行效果录制成MP4,但是文件体积比较大,而且很多网站不便于上传,基 ...
- Qt编写数据可视化大屏界面电子看板5-恢复布局
一.前言 恢复布局这个功能在整个数据可视化大屏界面电子看板系统中非常有用,很多时候不小心把现有布局拖动乱了,(当然如果不想布局被拖动改动,可以修改配置文件中的MoveEnable参数来控制,默认为真表 ...
- Flutter参数的传递和接收
上次只写了方法和参数,这次写了完整的示例,页面间参数的传递和接收的示例. 1.参数传递 用在程序上解释就是比如你进入一个商品选择列表,当你想选择一个商品的具体信息的时候,你就要传递商品编号,详细页面接 ...
- python遍历文件夹中所有文件夹和文件，os.walk
python中可以用os.walk来遍历某个文件夹中所有文件夹和文件. 例1: import os filePath = 'C:/Users/admin/Desktop/img' for dirpat ...
- kubernetes版本apiversion简单说明
在使用yaml文件部署Deployment项目时,出现过 error: error validating "xx-Deployment.yaml": error validatin ...
- 最新 用友网络java校招面经 （含整理过的面试题大全）
从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.用友网络等10家互联网公司的校招Offer,因为某些自身原因最终选择了用友网络.6.7月主要是做系统复习.项目复盘.Leet ...