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:保 ...
随机推荐
- 源码：自己用Python写的iOS项目自动打包脚本
http://www.cocoachina.com/ios/20160307/15501.html 什么?又要测试包! 做iOS开发几年了,每天除了码代码,改Bug之外,最让我烦恼的莫过于测试的妹子跑 ...
- Leetcode867.Transpose Matrix转置矩阵
给定一个矩阵 A, 返回 A 的转置矩阵. 矩阵的转置是指将矩阵的主对角线翻转,交换矩阵的行索引与列索引. 示例 1: 输入:[[1,2,3],[4,5,6],[7,8,9]] 输出:[[1,4,7] ...
- The 16th UESTC Programming Contest Final 游记
心情不好来写博客. 为了满足ykk想要气球的愿望,NicoDafaGood.Achen和我成功去神大耍了一圈. 因为队名一开始是LargeDumpling应援会,然后队名被和谐,变成了学校的名字,顿时 ...
- Sublime Text2的常用技巧总结（更新中...)
1. 选中一段内容后,按 Tab 或者 shift Tab 可以控制缩进 2. alt + shift + 数字, 开启多个窗口,数字代表分割后的个数,分割后按 Ctrl + shift + 数字 可 ...
- 19-2 from和modelform的用法和介绍
一 form 1. form的作用 1. 生成HTML代码 2. 帮我们做数据有效性的校验 3. 保留上次输入内容,显示错误提示 2. form组件校验数据有效性 1. 内置的校验规则 1. re ...
- 国外最受欢迎的十大社交APP网站
国外最受欢迎的十大社交APP网站 2016-11-01 09:34悠悠国外网 有哪些好的国外社交软件你知道吗,想使用国外流行的社交应用来体验不一样的社交么,想和外国友人交朋友么.本期悠悠国外网 ...
- NPOI操作、导出Excel
//使用NPOI操作Excel private void ExcelNPOI(System.Data.DataTable dt, HttpContext context) { IWorkbook wo ...
- 巨蟒python全栈开发-第11阶段 ansible3_3入门playbook剧本
1.playbook剧本 2.playbook传参 3.setup模块介绍 4.playbook的tags 5.playbook的handlers&&templates模块 6.条件和 ...
- CSS+div总结 标签： css 2016-01-17 11:35 926人阅读 评论(31) 收藏
根据学习计划,将视频进行了学习,之前就知道css是基础,然后一致认为既然是基础,应该比较简陋吧,结果经过学习才发现,css的效果也是很炫的啊,然后学习完了视频,自己又找了一些教程.下面就简单介绍一下我 ...
- SDUT-2088_数据结构实验之栈与队列十一：refresh的停车场
数据结构实验之栈与队列十一:refresh的停车场 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description refresh最近发 ...