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 相关文章推荐
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
Apr 24 HTML / CSS
使用CSS3制作饼状旋转载入效果的实例
Jun 23 HTML / CSS
全方位了解CSS3的Regions扩展
Aug 07 HTML / CSS
CSS Houdini实现动态波浪纹效果
Jul 30 HTML / CSS
css3的focus-within选择器的使用
May 11 HTML / CSS
使用jquery实现HTML5响应式导航菜单教程
Apr 02 HTML / CSS
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
Jun 23 HTML / CSS
基于HTML5+CSS3实现简单的时钟效果
Sep 11 HTML / CSS
使用html5新特性轻松监听任何App自带返回键的示例
Mar 13 HTML / CSS
HTML5自定义属性的问题分析
Aug 16 HTML / CSS
详解CSS中的特指度和层叠问题
Jul 15 HTML / CSS
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
Jul 16 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 ob_flush,flush在ie中缓冲无效的解决方法
2010/05/09 PHP
PHP获取MSN好友列表类的实现代码
2013/06/23 PHP
php 购物车完整实现代码
2014/06/05 PHP
Destoon实现多表查询示例
2014/08/21 PHP
js获取本机的外网/广域网ip地址完整源码
2013/08/12 Javascript
js 获取input点选按钮的值的方法
2014/04/14 Javascript
jQuery对于显示和隐藏等常用状态的判断方法
2014/12/13 Javascript
jQuery进行组件开发完整实例
2015/12/15 Javascript
深入理解Angular2 模板语法
2016/08/07 Javascript
AngularJS HTML DOM详解及示例代码
2016/08/17 Javascript
详解如何提高 webpack 构建 Vue 项目的速度
2017/07/03 Javascript
JS实现的走迷宫小游戏完整实例
2017/07/19 Javascript
react-redux中connect的装饰器用法@connect详解
2018/01/13 Javascript
基于Node.js搭建hexo博客过程详解
2019/06/25 Javascript
JS多个表单数据提交下的serialize()应用实例分析
2019/08/27 Javascript
javascript简单实现深浅拷贝过程详解
2019/10/08 Javascript
webpack的 rquire.context用法实现工程自动化的方法
2020/02/07 Javascript
python抓取网页图片并放到指定文件夹
2014/04/24 Python
详解Python中for循环的使用方法
2015/05/14 Python
详解将Django部署到Centos7全攻略
2018/09/26 Python
python 用户交互输入input的4种用法详解
2019/09/24 Python
通过实例了解Python str()和repr()的区别
2020/01/17 Python
Django 解决由save方法引发的错误
2020/05/21 Python
CSS3制作3D立方体loading特效
2020/11/09 HTML / CSS
英国女装网上商店:I Saw It First
2018/10/18 全球购物
办公室保洁员岗位职责
2013/12/02 职场文书
大学生开西餐厅创业计划书
2014/02/01 职场文书
房屋委托书范本
2014/04/04 职场文书
学生实习证明范文
2014/09/28 职场文书
2014年食堂工作总结
2014/11/20 职场文书
工作转正自我鉴定范文
2019/06/21 职场文书
七年级作文之游记
2019/12/11 职场文书
用几道面试题来看JavaScript执行机制
2021/04/30 Javascript
java Nio使用NioSocket客户端与服务端交互实现方式
2021/06/15 Java/Android
MySQL基于索引的压力测试的实现
2021/11/07 MySQL
Redis 持久化 RDB 与 AOF的执行过程
2021/11/07 Redis