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模块的目前的状况分析
Feb 24 HTML / CSS
多重CSS背景动画实现方法示例
Apr 04 HTML / CSS
使用CSS Grid布局实现网格的流动
Dec 30 HTML / CSS
可自定义箭头样式的CSS3气泡提示框
Mar 16 HTML / CSS
CSS3实现3D翻书效果
Jun 20 HTML / CSS
CSS3 清除浮动的方法示例
Jun 01 HTML / CSS
利用HTML5画出一个坦克的形状具体实现代码
Jun 20 HTML / CSS
HTML5中div、article、section的区别及使用介绍
Aug 14 HTML / CSS
利用纯html5绘制出来的一款非常漂亮的时钟
Jan 04 HTML / CSS
探索HTML5本地存储功能运用技巧
Mar 02 HTML / CSS
使用html2canvas.js实现页面截图并显示或上传的示例代码
Dec 18 HTML / CSS
h5使用canvas画布实现手势解锁
Jan 04 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
基于curl数据采集之单页面并行采集函数get_htmls的使用
2013/04/28 PHP
分享下PHP register_globals 值为on与off的理解
2013/09/26 PHP
一个经典的PHP文件上传类分享
2014/11/18 PHP
php 函数使用可变数量的参数方法
2017/05/02 PHP
PHP面向对象之里氏替换原则简单示例
2018/04/08 PHP
JQuery的ajax基础上的超强GridView展示
2009/09/18 Javascript
Jquery ajaxsubmit上传图片实现代码
2010/11/04 Javascript
Windows8下搭建Node.js开发环境教程
2014/09/03 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
2015/08/03 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
2015/08/14 Javascript
JS原型链 详解及示例代码
2016/09/06 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
2016/11/24 Javascript
js 判断一个数字是不是2的n次方幂的实例
2017/11/26 Javascript
结合Vue控制字符和字节的显示个数的示例
2018/05/17 Javascript
深入浅析Vue全局组件与局部组件的区别
2018/06/15 Javascript
Vue中的methods、watch、computed的区别
2018/11/26 Javascript
vue数据初始化initState的实例详解
2019/04/11 Javascript
vue无限轮播插件代码实例
2019/05/10 Javascript
NodeJS 文件夹拷贝以及删除功能
2019/09/03 NodeJs
python 获取网页编码方式实现代码
2017/03/11 Python
python如何把嵌套列表转变成普通列表
2018/03/20 Python
transform python环境快速配置方法
2018/09/27 Python
Python爬取爱奇艺电影信息代码实例
2019/11/26 Python
对Tensorflow中tensorboard日志的生成与显示详解
2020/02/04 Python
Python暴力破解Mysql数据的示例
2020/11/09 Python
常用UNIX 命令(Linux的常用命令)
2015/12/26 面试题
高三毕业生自我鉴定
2013/12/20 职场文书
办公自动化专业大学生职业规划书
2014/03/06 职场文书
计算机求职自荐信范文
2014/04/19 职场文书
实验室的标语
2014/06/20 职场文书
放飞梦想演讲稿600字
2014/08/26 职场文书
2014年中秋节活动总结
2014/08/29 职场文书
2014年会计主管工作总结
2014/12/20 职场文书
感谢信范文大全
2015/01/23 职场文书
圣诞晚会主持词
2015/07/01 职场文书
vue实现滑动解锁功能
2022/03/03 Vue.js