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实现波纹特效、H5实现动态波浪效果
Jan 31 HTML / CSS
前端隐藏出边界内容的实现方法
Apr 14 HTML / CSS
CSS3中媒体查询结合rem布局适配手机屏幕
Jun 10 HTML / CSS
CSS3+JavaScript实现炫酷呼吸效果的示例代码
Jun 15 HTML / CSS
编写html5时调试发现脚本php等网页js、css等失效
Dec 31 HTML / CSS
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
May 15 HTML / CSS
使用Html5 Stream开发实时监控系统
Jun 02 HTML / CSS
面试必问:圣杯布局和双飞翼布局的区别
May 13 HTML / CSS
html2 canvas svg不能识别的解决方案
Jun 03 HTML / CSS
CSS精灵图的原理与使用方法介绍
Mar 17 HTML / CSS
css样式important规则的正确使用方式
Jun 10 HTML / CSS
CSS实现背景图片全屏铺满自适应的3种方式
Jul 07 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
PHP4.04简明安装
2006/10/09 PHP
destoon利用Rewrite规则设置网站安全
2014/06/21 PHP
php读取csv文件并输出的方法
2015/03/14 PHP
thinkPHP5.0框架整体架构总览【应用,模块,MVC,驱动,行为,命名空间等】
2017/03/25 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
YII框架关联查询操作示例
2019/04/29 PHP
jquery获取input的value问题说明
2010/08/19 Javascript
JS完成代码前最好对其做5件事
2013/04/07 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
2013/04/15 Javascript
Extjs NumberField后面加单位实现思路
2013/07/30 Javascript
js单例模式的两种方案
2013/10/22 Javascript
用js控制组织结构图可以任意拖拽到指定位置
2014/01/17 Javascript
浅析node.js中close事件
2014/11/26 Javascript
javascript编写贪吃蛇游戏
2015/07/07 Javascript
浅谈JavaScript的内置对象和浏览器对象
2016/06/03 Javascript
Vue.js每天必学之构造器与生命周期
2016/09/05 Javascript
Three.js入门之hello world以及如何绘制线
2017/09/25 Javascript
JavaScript键盘事件常见用法实例分析
2019/01/03 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
2020/01/26 Javascript
JavaScript 类的封装操作示例详解
2020/05/16 Javascript
python任务调度实例分析
2015/05/19 Python
举例详解Python中threading模块的几个常用方法
2015/06/18 Python
尝试使用Python多线程抓取代理服务器IP地址的示例
2015/11/09 Python
Python使用Matplotlib实现Logos设计代码
2017/12/25 Python
python线程中的同步问题及解决方法
2019/08/29 Python
python 无损批量压缩图片(支持保留图片信息)的示例
2020/09/22 Python
python正则表达式re.match()匹配多个字符方法的实现
2021/01/27 Python
CSS3 滤镜 webkit-filter详细介绍及使用方法
2012/12/27 HTML / CSS
房地产销售大学生自我评价分享
2013/11/11 职场文书
爱国演讲稿500字
2014/05/04 职场文书
四风对照检查材料思想汇报
2014/09/20 职场文书
商务代表岗位职责
2015/02/15 职场文书
员工家属慰问信
2015/03/24 职场文书
刑事案件上诉状
2015/05/23 职场文书
2016教师校本研修心得体会
2016/01/08 职场文书
2016年“11.11”光棍节活动总结
2016/04/05 职场文书