html5中localStorage本地存储的简单使用


Posted in HTML / CSS onJune 16, 2017

我们在做页面时会用到本地存储的时候,今天说说localStorage本地存储。

1、localStorage.name="老王";      //第一种设置存储本地数据的方法localStorage

2、localStorage.setItem("color","red");   //第二种设置存储本地数据的方法

3、localStorage.removeItem("name"); //删除本地存储数据

4、localStorage.name

//获取本地数据
   localStorage.getItem("set")

//另一种获取本地数据的方法

5 localStorage.key(0) //获取前面保存数据的名称 括号中的数值和数组相同

6、localStorage.clear() //清除所有本地存储的数据

7、localStorage.setItem("set1","{'name':'小李','age':'1314'}") //保存为json格式,1、节省条数 2、提取方便

8、var price=localStorage.getItem("set1") // 获取保存的本地数据

obj=eval('('+price+')') //将json格式字符串转换为对象

alert(obj.age) //调用其中的值

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    localStorage.name="杜人龙";
    localStorage.name="小花"; //第一种设置本地数据的方法
    localStorage.setItem("set","小菊"); //第二种设置本地数据的方法
    localStorage.setItem("set1","{'name':'小李','age':'1314'}") //保存为json格式
    localStorage.removeItem("name"); //删除本地存储数据
    alert(localStorage.name) //获取本地数据
    alert(localStorage.getItem("set"))  //另一种获取本地数据的方法
    alert(localStorage.key(0)) //获取前面保存数据的名称 括号中的数值和数组相同
    var price=localStorage.getItem("set1")
    obj=eval('('+price+')')
    alert(obj.age)
    localStorage.clear()  //清楚本地所有数据
</script>
</body>
</html>

存储位置

html5中localStorage本地存储的简单使用

以上所述是小编给大家介绍的html5中localStorage本地存储的简单使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
细说CSS3中的选择符
Oct 17 HTML / CSS
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
Jun 06 HTML / CSS
css3圆角样式分享自定义按钮样式
Dec 27 HTML / CSS
css3实现超立体3D图片侧翻倾斜效果
Apr 16 HTML / CSS
纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例
Nov 11 HTML / CSS
纯css3制作网站后台管理面板
Dec 30 HTML / CSS
CSS3中线性颜色渐变的一些实现方法
Jul 14 HTML / CSS
利用CSS3实现的文字定时向上滚动
Aug 29 HTML / CSS
CSS3使用transition属性实现过渡效果
Apr 18 HTML / CSS
html5自带表单验证体验优化及提示气泡修改功能
Sep 12 HTML / CSS
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
Jan 09 HTML / CSS
深入了解canvas在移动端绘制模糊的问题解决
Apr 30 HTML / CSS
HTML5实现QQ聊天气泡效果
Jun 26 #HTML / CSS
详解H5本地储存Web Storage
Jul 03 #HTML / CSS
H5仿微信界面教程(一)
Jul 05 #HTML / CSS
HTML5 progress和meter控件_动力节点Java学院整理
Jul 06 #HTML / CSS
html5 input元素新特性_动力节点Java学院整理
Jul 06 #HTML / CSS
html5标记文字_动力节点Java学院整理
Jul 11 #HTML / CSS
html5 localStorage本地存储_动力节点Java学院整理
Jul 06 #HTML / CSS
You might like
php中二分法查找算法实例分析
2016/09/22 PHP
thinkphp下MySQL数据库读写分离代码剖析
2017/04/18 PHP
PHP addslashes()函数讲解
2019/02/03 PHP
jQuery UI Autocomplete 1.8.16 中文输入修正代码
2012/04/16 Javascript
ajax处理php返回json数据的实例代码
2013/01/24 Javascript
js获取浏览器基本信息大全
2014/11/27 Javascript
推荐10 款 SVG 动画的 JavaScript 库
2015/03/24 Javascript
jQuery中的ajax async同步和异步详解
2015/09/29 Javascript
JS函数的几种定义方式分析
2015/12/17 Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
2016/07/27 Javascript
H5移动端图片压缩上传开发流程
2016/11/09 Javascript
Google 爬虫如何抓取 JavaScript 的内容
2017/04/07 Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
2017/11/08 jQuery
微信小程序icon组件使用详解
2018/01/31 Javascript
讲解vue-router之什么是动态路由
2018/05/28 Javascript
JS实现图片上传多次上传同一张不生效的处理方法
2018/08/06 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
2019/11/25 Javascript
JavaScript数组排序功能简单实现
2020/05/14 Javascript
Python实现的监测服务器硬盘使用率脚本分享
2014/11/07 Python
举例讲解Python中的Null模式与桥接模式编程
2016/02/02 Python
Python实现的NN神经网络算法完整示例
2018/06/19 Python
kaggle+mnist实现手写字体识别
2018/07/26 Python
Python格式化输出字符串方法小结【%与format】
2018/10/29 Python
Python实现的登录验证系统完整案例【基于搭建的MVC框架】
2019/04/12 Python
pytorch下使用LSTM神经网络写诗实例
2020/01/14 Python
CSS3对图片照片进行边缘模糊处理的实现
2018/08/08 HTML / CSS
乌克兰第一的珠宝网上商店:Gold.ua
2019/11/29 全球购物
物流经理自我评价
2013/09/23 职场文书
给物业的表扬信
2014/01/21 职场文书
优秀班干部事迹材料
2014/01/26 职场文书
绩效管理实施方案
2014/03/19 职场文书
节约用水标语
2014/06/11 职场文书
知识竞赛拉拉队口号
2014/06/16 职场文书
初中差生评语
2014/12/29 职场文书
SONY AN-LP1 短波有源天线放大器图
2022/04/05 无线电
联想win10摄像头打不开怎么办?win10笔记本摄像头打不开解决办法
2022/04/08 数码科技