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 media queries + jQuery实现响应式导航
Sep 30 HTML / CSS
纯CSS3实现圆角效果(含IE兼容解决方法)
May 07 HTML / CSS
HTML5的video标签的浏览器兼容性增强方案分享
May 19 HTML / CSS
HTML5安全介绍之内容安全策略(CSP)简介
Jul 10 HTML / CSS
HTML5重塑Web世界它将如何改变互联网
Dec 17 HTML / CSS
仿CSDN Blog返回页面顶部功能实现原理及代码
Jun 30 HTML / CSS
x-ua-compatible content=”IE=7, IE=9″意思理解
Jul 22 HTML / CSS
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
Nov 05 HTML / CSS
带你认识HTML5中的WebSocket
May 22 HTML / CSS
Html5插件教程之添加浏览器放大镜效果的商品橱窗
Jan 07 HTML / CSS
HTML5 常见面试题之PC端和移动端区别介绍
Jan 22 HTML / CSS
详解如何获取localStorage最大存储大小的方法
May 21 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 错误之引号中使用变量
2009/05/04 PHP
PHP正则的Unknown Modifier错误解决方法
2010/03/02 PHP
PHP提取字符串中的图片地址[正则表达式]
2011/11/12 PHP
PHP递归删除目录几个代码实例
2014/04/21 PHP
Yii结合CKEditor实现图片上传功能
2014/06/13 PHP
PHP生成二维码的两个方法和实例
2014/07/01 PHP
CI框架中site_url()和base_url()的区别
2015/01/07 PHP
PHP数组相关函数汇总
2015/03/24 PHP
laravel框架上传图片实现实时预览功能
2019/10/14 PHP
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
jquery datatable后台封装数据示例代码
2014/08/07 Javascript
javascript实现日期格式转换
2014/12/16 Javascript
JavaScript中的DSL元编程介绍
2015/03/15 Javascript
Bootstrap3学习笔记(三)之表格
2016/05/20 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
2017/03/14 Javascript
Vue.js数据绑定之data属性
2017/07/07 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
2017/07/27 Javascript
iview table高度动态设置方法
2018/03/14 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
2018/05/25 Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
2018/12/11 jQuery
仿ElementUI实现一个Form表单的实现代码
2019/04/23 Javascript
vue获取验证码倒计时组件
2019/08/26 Javascript
vue a标签点击实现赋值方式
2020/09/07 Javascript
Javascript新手入门之字符串拼接与变量的应用
2020/12/03 Javascript
用python写的一个wordpress的采集程序
2016/02/27 Python
Python算法之图的遍历
2017/11/16 Python
Python实现最大子序和的方法示例
2019/07/05 Python
Python通过cv2读取多个USB摄像头
2019/08/28 Python
python实现复制大量文件功能
2019/08/31 Python
PyCharm搭建Spark开发环境的实现步骤
2019/09/05 Python
Python坐标轴操作及设置代码实例
2020/06/04 Python
总经理职责范文
2013/11/08 职场文书
高中生家长寄语大全
2014/04/03 职场文书
大学生职业生涯十年规划书范文
2014/09/17 职场文书
python字符串拼接.join()和拆分.split()详解
2021/11/23 Python
vue打包时去掉所有的console.log
2022/04/10 Vue.js