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弹性盒模型开发笔记(一)
Apr 26 HTML / CSS
CSS3教程:background-clip和background-origin
Oct 17 HTML / CSS
css3+jq创作含苞待放的荷花
Feb 20 HTML / CSS
浅谈css3新单位vw、vh、vmin、vmax的使用详解
Dec 01 HTML / CSS
详解CSS3中常用的样式【基本文本和字体样式】
Oct 20 HTML / CSS
IE10 Error.stack 让脚本调试更加方便快捷
Apr 22 HTML / CSS
用html5绘制折线图的实例代码
Mar 25 HTML / CSS
html5组织内容_动力节点Java学院整理
Jul 10 HTML / CSS
详解移动端h5页面根据屏幕适配的四种方案
Apr 15 HTML / CSS
HTML5 video循环播放多个视频的方法步骤
Aug 06 HTML / CSS
六种css3实现的边框过渡效果
Apr 22 HTML / CSS
HTML5之高度塌陷问题的解决
Jun 01 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初学者头疼问题总结
2006/10/09 PHP
php使用ob_start()实现图片存入变量的方法
2014/11/14 PHP
Yii清理缓存的方法
2016/01/06 PHP
PHP时间戳格式全部汇总 (获取时间、时间戳)
2016/06/13 PHP
thinkPHP框架中执行事务的方法示例
2018/05/31 PHP
Laravel框架实现利用监听器进行sql语句记录功能
2018/06/06 PHP
js利用Array.splice实现Array的insert/remove
2009/01/13 Javascript
基于JQuery制作的产品广告效果
2010/12/08 Javascript
javascrip客户端验证文件大小及文件类型并重置上传
2011/01/12 Javascript
jQuery动态添加删除select项(实现代码)
2013/09/03 Javascript
jQuery Validate初步体验(一)
2015/12/12 Javascript
正则验证小数点后面只能有两位数的方法
2017/02/28 Javascript
vue-mugen-scroll组件实现pc端滚动刷新
2019/08/16 Javascript
three.js利用射线Raycaster进行碰撞检测
2020/03/12 Javascript
详解Vue中Axios封装API接口的思路及方法
2020/10/10 Javascript
[51:10]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python 解析html之BeautifulSoup
2009/07/07 Python
python学习教程之使用py2exe打包
2017/09/24 Python
Python实现PS滤镜中马赛克效果示例
2018/01/20 Python
解决python matplotlib imshow无法显示的问题
2018/05/24 Python
对python数据切割归并算法的实例讲解
2018/12/12 Python
Python3如何对urllib和urllib2进行重构
2019/11/25 Python
Python内置数据类型list各方法的性能测试过程解析
2020/01/07 Python
python GUI库图形界面开发之PyQt5不规则窗口实现与显示GIF动画的详细方法与实例
2020/03/09 Python
Python关键字及可变参数*args,**kw原理解析
2020/04/04 Python
Python 如何在字符串中插入变量
2020/08/01 Python
css3发光搜索表单分享
2014/04/11 HTML / CSS
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
2013/06/09 HTML / CSS
canvas需要在标签里直接定义宽高
2014/12/17 HTML / CSS
欧姆龙医疗欧洲有限公司:Omron Healthcare Europe B.V
2020/06/13 全球购物
食品流通安全承诺书
2014/05/22 职场文书
先进员工事迹材料
2014/12/20 职场文书
销售合作意向书范本
2015/05/08 职场文书
浅谈mysql执行过程以及顺序
2021/05/12 MySQL
MySQL命令无法输入中文问题的解决方式
2021/08/30 MySQL
详解Golang如何实现支持随机删除元素的堆
2022/09/23 Python