H5 数据存储localStorage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<pre>
localStorage的使用：
1.存储的内容大概20mb
2.不同浏览器不能共享数据。但是在同一个浏览器的不同窗口中可以共享数据
3.永久生效，它的数据是存储在硬盘上，并不会随着页面或者浏览器的关闭而清除.如果想清除，必须手动清除 setItem(key,value):存储数据，以键值对的方式存储
getItem(key):获取数据，通过指定名称的key获取对应的value值
removeItem(key):删除数据，通过指定名称key删除对应的值
clear():清空所有存储的内容</pre>
<br>
<input type="text" id="userName"><br>
<input type="button" value="设置数据" id="setData">
<input type="button" value="获取数据" id="getData">
<input type="button" value="删除数据" id="removeData">
<input type="button" value="清空数据" id="emptyData">
<script>
document.querySelector("#setData").onclick=function(){
var name=document.querySelector("#userName").value;
/*使用localStorage存储数据*/
window.localStorage.setItem("userName",name);
}
/*获取数据*/
document.querySelector("#getData").onclick=function(){
var name=window.localStorage.getItem("userName");
alert(name);
}
/*清除数据*/
document.querySelector("#removeData").onclick=function(){
window.localStorage.removeItem("userName");
}
/* 清空数据 */
document.querySelector("#emptyData").onclick=function () {
window.localStorage.clear ();
}
</script>
</body>
</html>
H5 数据存储localStorage的更多相关文章
- 利用H5本地存储localStorage、sessionStorage
最近的业务处理上,要使用cookie缓存储一下数据,公司的cookie还搞出点问题.而用户的浏览器都是利用微信的内置,普遍支持h5的本地存储.于是利用了这个... 现代浏览器普遍开始支持H5本地存储, ...
- H5 - 本地数据存储 - localStorage.setItem
- angularjs 本地数据存储LocalStorage
1.定义服务 //=========本地存储数据服务============ app.factory('locals', ['$window', function ($window) { return ...
- Angular本地数据存储LocalStorage
//本地存储数据===================================.factory('locals',['$window',function($window){ return{ / ...
- angular.js 本地数据存储LocalStorage
定义工厂模式 factory 本地存储数据服务 app.factory('locals', ['$window', function ($window) { return { //存储单个属性 se ...
- H5本地存储详细使用教程（localStorage + JSON数据存储应用框架）
一.Web Storage教程 1.概述: 对于Web Storage来说,实际上是Cookies存储的进化版.如果了解Cookie的人几乎一看Web Storage就会用,如果你从来没用过没了解过C ...
- 客户端相关知识学习（十一）之Android H5交互Webview实现localStorage数据存储
前言 最近有一个需求是和在app中前端本地存储相关的,所以恶补了一下相关知识 webView开启支持H5 LocalStorage存储 有些时候我们发现写的本地存储没有起作用,那是因为默认WebVie ...
- 前端数据存储方案集合（cookie localStorage等）以及详解 （二）
前端数据存储方案集合(cookie localStorage等)以及详解 (二) 在之前的文章中已经介绍到了 前端存储方案中的 cookie . 但是 cookie 的存储上限是 4KB. 如果超过了 ...
- H5本地存储：sessionStorage和localStorage
作者:心叶时间:2018-05-01 18:30 H5提供了二种非常好用的本地存储方法:sessionStorage和localStorage,下面分别介绍一下: 1.sessionStorage:保 ...
随机推荐
- conda 下配置环境
conda list 查看已有环境(感觉anaconda 中查看的不全,只有指定路径的,但是这个路径和默认创建的路径不一样 然后我发现 要安装traits 库必须要的是PyQt4 但是我的py3下只有 ...
- Qt添加右键菜单
QAction *hideAction = new QAction(tr(" 隐藏"),this); addAction(hideAction); setContextMenuPo ...
- epiinfo是美国CDC开发维护的流行病学数据录入和分析软件，在DOS时代占主流，随着Windows的普及用的人越来越少了，epiinfo重新开发Windows版本后，体积庞大且不好用。在数据录入方面已被EpiData取代，不过epiinfo的分析模块，比如地理信息系统某些情况下还是挺有用的。
Manual: https://www.cdc.gov/epiinfo/support/userguide.html https://en.wikipedia.org/wiki/Epi_Info 教程 ...
- 了解apache与tomcat的关系
较多的了解过apache,但对tomcat却了解不多: 使用LAMP构建网站毕竟还是有很大局限,越来越多的网站将给予java构建了. http://developer.51cto.com/art/20 ...
- Directx11教程(11) 增加一个debug宏
原文:Directx11教程(11) 增加一个debug宏 现在我们在common.h中增加一个debug的宏,在每个d3d11函数后调用,如果d3d函数出错,它能够给出程序中错误的代码行 ...
- 手机monkey测试BUG重现及解决方法
目录 1.1 Monkey测试简介...1 1.2 Monkey程序介绍...1 1.3 Monkey命令的简单帮助...2 1.4 Monkey命令参数介绍...2 1.5 Monkey测试步骤.. ...
- 总结 ESP8266 RTOS 开发环境搭建
总结 ESP8266 RTOS 开发环境搭建 仔细看官方文档. 必须一步一步操作. 不要想当然,以为 make 就可以. 忽略编译警告,除非是错误. 工具链必须使用官方提供的. 多看看 Issues ...
- pytorch 多GPU训练总结（DataParallel的使用）
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/weixin_40087578/artic ...
- javaScript之split与join的区别
共同点: split与join函数通常都是对字符或字符串的操作: 两者的区别: split() 用于分割字符串,返回一个数组,例如 var str="How are you doing to ...
- KiCad EDA 过孔是否可以开窗？
KiCad EDA 过孔是否可以开窗? 和传统的商业 EDA 不同,KiCad EDA 的过孔默认就是盖绿油. 在 KiCad 的过孔界面没有任何可以设置的地方,这也有一个好处,不过考虑过孔是否盖油. ...