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 和 HTML5 兼容速查表 图文
Apr 01 HTML / CSS
让IE6、IE7、IE8支持CSS3的脚本
Jul 20 HTML / CSS
利用HTML5+CSS3实现3D转换效果实例详解
May 02 HTML / CSS
css3 column实现卡片瀑布流布局的示例代码
Jun 22 HTML / CSS
CSS3 实现发光边框特效
Nov 11 HTML / CSS
实例教程 利用html5和css3打造一款创意404页面
Oct 20 HTML / CSS
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
Nov 05 HTML / CSS
HTML5 canvas基本绘图之绘制曲线
Jun 27 HTML / CSS
移动端html5模拟长按事件的实现方法
Sep 30 HTML / CSS
CSS3鼠标悬浮过渡缩放效果
Apr 17 HTML / CSS
如何利用 CSS Overview 面板重构优化你的网站
Oct 24 HTML / CSS
CSS3实现360度循环旋转功能
Feb 12 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选项与信息函数的使用详解
2013/05/10 PHP
PHP中字符安全过滤函数使用小结
2015/02/25 PHP
PHP 计算至少是其他数字两倍的最大数的实现代码
2020/05/26 PHP
flash调用js中的方法,让js传递变量给flash的办法及思路
2013/08/07 Javascript
JavaScript删除数组元素的方法
2015/03/20 Javascript
浅谈setTimeout 与 setInterval
2015/06/23 Javascript
js强制把网址设为默认首页
2015/09/29 Javascript
JavaScript中实现键值对应的字典与哈希表结构的示例
2016/06/12 Javascript
用jquery快速解决IE输入框不能输入的问题
2016/10/04 Javascript
CentOS 安装NodeJS V8.0.0的方法
2017/06/15 NodeJs
5分钟打造简易高效的webpack常用配置
2017/07/04 Javascript
微信小程序实现页面跳转传值的方法
2017/10/12 Javascript
Angularjs之如何在跨域请求中传输Cookie的方法
2018/06/01 Javascript
微信小程序下拉框搜索功能的实现方法
2019/07/31 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
2019/08/08 jQuery
vuex vue简单使用知识点总结
2019/08/29 Javascript
Vue3.0数据响应式原理详解
2019/10/09 Javascript
Python 逐行分割大txt文件的方法
2017/10/10 Python
单利模式及python实现方式详解
2018/03/20 Python
python查看模块,对象的函数方法
2018/10/16 Python
浅谈django的render函数的参数问题
2018/10/16 Python
Python线程之定位与销毁的实现
2019/02/17 Python
Python中单线程、多线程和多进程的效率对比实验实例
2019/05/14 Python
Amara德国:家居饰品、设计师品牌和豪华礼品
2019/05/20 全球购物
英国领先的豪华时尚家居网上商店:Amara
2019/08/12 全球购物
Linux上比较文件的命令都有哪些
2012/02/24 面试题
人力资源管理专业毕业生推荐信
2013/11/07 职场文书
护士实习生自我鉴定范文
2013/12/10 职场文书
财务支持类个人的自我评价
2014/02/14 职场文书
市场总经理岗位职责
2014/04/11 职场文书
民事诉讼代理授权委托书范本
2014/10/08 职场文书
2014年党委工作总结
2014/11/22 职场文书
催款通知书范文
2015/04/17 职场文书
部门2015年度工作总结
2015/04/29 职场文书
辛亥革命观后感
2015/06/02 职场文书
2019幼儿教师求职信(3篇)
2019/09/20 职场文书