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:保 ...
随机推荐
- 移动HTML5前端框架—MUI
前 言 JRedu 鉴于之前的很多前端框架(特别是响应式布局的框架),UI控件看起来太像网页,没有原生感觉,因此追求原生UI也是MUI的重要目标.MUI以iOS平台UI为基础,补充部分Andro ...
- php rmdir使用递归函数删除非空目录的方法
php rmdir()函数 rmdir ― 删除空目录 语法: bool rmdir ( string $dirname [, resource $context ] )尝试删除 dirname 所指 ...
- 安装tomcat(fedora16)
sudo yum install tomcat6 sudo yum install tomcat6-webapps sudo yum install tomcat6-admin-webapps s ...
- 自定义连接池DataSourse
自定义连接池DataSourse 连接池概述: 管理数据库的连接, 作用: 提高项目的性能.就是在连接池初始化的时候存入一定数量的连接,用的时候通过方法获取,不用的时候归还连接即可.所有的连接池必须实 ...
- AGC029 E: Wandering TKHS
E: Wandering TKHS - AtCoder Grand Contest 029 | AtCoder 分类讨论好题(也不太算分类讨论) 方法:感受过程手玩,考虑能不能提前预算一些东西,或者 ...
- LeedCode OJ --- Binary Tree Inorder Traversal
点击打开题目链接 今天只是写了递归的版本,因为还没想好怎么用迭代来实现,可以写的过程中,有一点是有疑问的,虽然我的代码可以AC. 问题是:主调函数是可以使用子函数中返回的在子函数中定义的vector. ...
- Python发送邮件(带附件的)
有时候做自动化测试任务,任务完成后,需要将结果自动发送一封邮件,这里用到smtplib模块,直接导入就行,这里以163邮箱为例,需要用到授权码,我用类写一下: 如果是发送qq邮箱,要将smtp 改成s ...
- windows和linux下读取文件乱码的终极解决办法！
乱码是个很恶心的问题. windows和linux读取txt文件,一旦读取了,编码发生改变,就无法再还原了,只有重启项目. 网上有很多方法都是读取文件头,方法很好,但是亲测都不能用(右移8位判断0xf ...
- 洛谷 P1447 [NOI2010]能量采集 （莫比乌斯反演）
题意:问题可以转化成求$\sum_{i=1}^{n}\sum_{j=1}^{m}(2*gcd(i,j)-1)$ 将2和-1提出来可以得到:$2*\sum_{i=1}^{n}\sum_{j=1}^{m} ...
- Jsp中解决session过期跳转到登陆页面并跳出iframe框架的方法
1.可以用javaScript解决在你想控制跳转的页面,比如login.jsp中的<head>与</head>之间加入以下代码: <script language=”Ja ...