HTML5新增的本地存储功能分为两种,分别对应两个JS对象:①本地存储对应localStorage对象,主要用于长期保存整个网站的数据(这些数据可以永久保存在客户端电脑硬盘内)。②会话存储对应sessionStorage对象,用于临时保存一个窗口的数据(在这个窗口关闭之前,数据是存在的,关闭窗口之后会被浏览器删除)。无论本地存储还是会话存储,都是与网站所在的域联系在一起的(也就是说,在同一个域名内,数据是可以互相访问的)。由于这些数据是保存在用户的计算机上,网页不能访问保存在其他用户计算机上的数据,类似的,如果你用不同的用户名登陆自己的计算机或者使用不用的浏览器,那么存取的也将是不同的本地存储数据。浏览器对web存储的支持是比较好的,最低版本有:IE8、chrome5、safari4、opera10.5、safari ios2以及android2

操作本地存储和会话存储:

    //保存一段信息到本地存储或会话存储中
localStorage[keyName] = data;
sessionStorage[keyName] = data;
//如果要检测某个属性值是否为空,可以直接测试它是否等于null
if (localStorage['name'] == null){alert('没有保存name这个属性')}

删除存储数据:只要调用removeItem()方法,存入要删除的属性名就可以删除不想要的数据了,也可以调用clear()方法,清空网站的存储数据(本地存储和会话存储都适用):

//删除某个存储数据
localStorage.removeItem('user_name'); //删除所有存储数据
localStorage.clear();

查找所有数据:适用key()方法可以从本地或会话存储中取得当前网站保存的所有数据

数据类型:通过localStorage或sessionStorage对象保存起来的数据,都会自动转换为字符串。如果要调用这两个对象里面的值是数字,则需要先把字符串转换为数字才能用。如果是对象,则可以通过JSON.parse()方法转换为对象在调用。

HTML5新增的本地存储功能(笔记)的更多相关文章

  1. HTML5开发学习:本地存储Web Sql Database

       Web Sql Database,中文翻译作"本地数据库",是随着HTML5规范加入的在浏览器端运行的轻量级数据库.    在HTML5中,大大丰富了客户端本地可以存储的内容 ...

  2. HTML5教程之本地存储SessionStorage

    SessionStorage: 将数据保存在session对象中,所谓session是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间会话,也就是用户浏览这个网站所花费的时间就是sess ...

  3. HTML5 使用localstorage 本地存储

    HTML 本地存储介绍 最早的 Cookies 自然是大家都知道,问题主要就是太小,大概也就 4KB 的样子,而且 IE6 只支持每个域名20个cookies,太少了.优势就是大家都支持,而且支持得还 ...

  4. HTML5规范的本地存储

    在HTML5 中定义了两种本地存储的,Web Storage 和本地数据库 SQL Database . 用来检查判断浏览器是否支持 Web Storage if(window.localStorag ...

  5. HTML5学习总结——本地存储

    一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...

  6. 初识html5的localStorage本地存储

    一.概述 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前,这些都是 ...

  7. h5新增属性本地存储

    ---恢复内容开始--- 存储的两种类型: localStorage 和 sessionStorage localstorage:没有时间限制的数据存储 sessionStorage  针对一个ses ...

  8. HTML5的本地存储功能,值得研究

    https://developer.chrome.com/apps/offline_storage 搜索“chrome html5 本地缓存”,一大堆文章,比如: http://www.cnblogs ...

  9. Html5中的本地存储

    Web Storage web storage页面存储是html5为数据存储在客户端提供的一项重要功能,由于web storage API能够区分会话数据与长期数据.因此,相应API也分为两种: se ...

随机推荐

  1. react 组件构建设计

    项目设计中,可以从顶层React元素开始,然后实现它的子组件,自顶向下来构建组件的层级组件的写法:1.引入依赖模块2.定义React组件3.作为模块导出React组件4.子组件更新父组件的机制5.父组 ...

  2. 初期测评 E 迷障

    https://vjudge.net/contest/240302#problem/E 通过悬崖的yifenfei,又面临着幽谷的考验—— 幽谷周围瘴气弥漫,静的可怕,隐约可见地上堆满了骷髅.由于此处 ...

  3. php错误报告和调试

    3. 错误报告和调试 常常犯的一个错误是忘记关闭 PHP 错误和数据库错误报告,这样做是有风险的.在任何一个公开的站点,error_reporting 应该设置为0 ,最多只能设置为 E_ERROR, ...

  4. 计算机网络【10】—— Cookie与Session

    一.cookie 和session 的区别 a.cookie数据存放在客户的浏览器上,session数据放在服务器上. b.cookie不是很安全,别人可以分析存放在本地的COOKIE并进行COOKI ...

  5. 深入理解JAVA虚拟机阅读笔记1——JAVA内存区域

    一.Java内存区域 1.程序计数器 线程私有. 当前线程所执行的字节码的行号指示器.由于JAVA是多线程的,因此每个线程都独立的程序计数器. 异常:没有规定任何OutOfMemeryError情况的 ...

  6. 一文总结之MyBatis

    目录 MyBatis 目标 MyBatis演示 Configuration.xml 映射文件 初始化配置文件 Dao Spring与MyBatis集成 pom Spring配置文件 MyBatis配置 ...

  7. java 连接oracle 进行增删改查

    1.在DAO层新增类OraclePersionDao package com.test.dao; import java.sql.*; /** * Created by wdw on 2017/9/1 ...

  8. Linux相关——记录gdb基本操作(持续更新)

    -----------2018.9.26更新标记----------- gdb的确是个很强大的东西啊,这里记录一下gdb的基本操作吧 后续可能会补充,但暂时感觉够用了就不写多了. 首先是ubuntu终 ...

  9. 洛谷 P4091 [HEOI2016/TJOI2016]求和 解题报告

    P4091 [HEOI2016/TJOI2016]求和 题目描述 在2016年,佳媛姐姐刚刚学习了第二类斯特林数,非常开心. 现在他想计算这样一个函数的值: \[ f(n)=\sum_{i=0}^n\ ...

  10. java随机数的有趣用法

    直接用代码说明,比较容易理解 package com.wz.other; import java.util.Random;import java.util.concurrent.ThreadLocal ...