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 相关文章推荐
HTML5如何适配 iPhone IOS 底部黑条
Mar 09 HTML / CSS
css3实现input输入框颜色渐变发光效果代码
Apr 02 HTML / CSS
利用纯css3实现的文字亮光特效的代码演示
Nov 27 HTML / CSS
CSS3 text shadow字体阴影效果
Jan 08 HTML / CSS
css3 pointer-events 介绍详解
Sep 18 HTML / CSS
html5时钟实现代码
Oct 22 HTML / CSS
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
Jan 30 HTML / CSS
使用HTML5在网页中嵌入音频和视频播放的基本方法
Feb 22 HTML / CSS
iphoneX 适配客户端H5页面的方法教程
Dec 08 HTML / CSS
Html5调用企业微信的实现
Apr 16 HTML / CSS
css实现左上角飘带效果的完整代码
Mar 18 HTML / CSS
使用HBuilder制作一个简单的HTML5网页
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
php学习之变量的使用
2011/05/29 PHP
thinkphp3.2.2实现生成多张缩略图的方法
2014/12/19 PHP
PHP比较运算符的详细介绍
2015/09/29 PHP
用jquery实现的一个超级简单的下拉菜单
2014/05/18 Javascript
jQuery遍历对象、数组、集合实例
2014/11/08 Javascript
HTML,CSS,JavaScript速查表推荐
2014/12/02 Javascript
JavaScript 面向对象与原型
2015/04/10 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
2016/04/14 Javascript
JavaScript数组实现数据结构中的队列与堆栈
2016/05/26 Javascript
基于jQuery实现一个marquee无缝滚动的插件
2017/03/09 Javascript
五步轻松实现zTree的使用
2017/11/01 Javascript
原生JS写Ajax的请求函数功能
2017/12/22 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
2018/01/12 Javascript
vue项目中axios请求网络接口封装的示例代码
2018/12/18 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
2019/05/17 Javascript
JavaScript数组排序功能简单实现
2020/05/14 Javascript
python获取文件版本信息、公司名和产品名的方法
2014/10/05 Python
在Python中进行自动化单元测试的教程
2015/04/15 Python
Django 框架模型操作入门教程
2019/11/05 Python
Python实现变声器功能(萝莉音御姐音)
2019/12/05 Python
Python中logging日志的四个等级和使用
2020/11/17 Python
用css3制作纸张效果(外翻卷角)
2013/02/01 HTML / CSS
HTML5 贪吃蛇游戏实现思路及源代码
2013/09/03 HTML / CSS
沪江旗下的海量优质课程平台:沪江网校
2017/11/07 全球购物
高中生学习生活的自我评价
2013/11/27 职场文书
人事文员岗位职责
2014/02/16 职场文书
销售助理岗位职责
2014/02/21 职场文书
大学活动总结范文
2014/04/29 职场文书
本科生导师推荐信范文
2014/05/18 职场文书
委托书范本
2014/09/13 职场文书
办理房产证委托书
2014/09/18 职场文书
实习证明格式范文
2014/10/14 职场文书
2019年怎样才能撰写出优秀的自荐信
2019/03/25 职场文书
Linux安装Nginx步骤详解
2021/03/31 Servers
opencv-python图像配准(匹配和叠加)的实现
2021/06/23 Python
Python基础 括号()[]{}的详解
2021/11/07 Python