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. 【第十周】psp

    代码累计 300+575+475+353+620+703=2926 随笔字数 1700+3000+3785+4210+4333+3032=20727 知识点 机器学习,支持向量机 数据库技术 Acm刷 ...

  2. .net mvc nopi生成word

    参考下面地址,实例已很不错了 https://www.cnblogs.com/ZaraNet/p/9691908.html

  3. 在tensorflow环境下安装matplotlib

    在运行程序时,报错ImportError: No module named 'matplotlib',如图.经网上查询发现是没有安装matplotlib 因此记录一下在tensorflow环境下安装m ...

  4. 3.11 - 3.12 A day with Google

    补了一番游记. 找了一个本科学弟一起去上海游玩.本来老板还要我周一过去讨论寒假阅读的论文,总算是把讨论时间挪到周六了. 兴冲冲地买好车票后就开始期待上海Google office的神秘之旅. upda ...

  5. 谷歌钦定的编程语言Kotlin大揭秘

    第一时间关注程序猿(媛)身边的故事 谷歌钦定的编程语言Kotlin大揭秘 语法+高级特性+实现原理:移动开发者升职加薪宝典! 谷歌作为世界级的科技公司巨头,强悍的技术研发与创新能力使其一直是业界的楷模 ...

  6. 【BZOJ4247】挂饰(动态规划)

    [BZOJ4247]挂饰(动态规划) 题面 BZOJ 题解 设\(f[i][j]\)表示前\(i\)个物品中还剩下\(j\)个挂钩时的最大答案. 转移显然是一个\(01\)背包,要么不选:\(f[i] ...

  7. 【BZOJ2006】【NOI2010】超级钢琴(主席树,优先队列)

    [BZOJ2006]超级钢琴(主席树,优先队列) 题面 BZOJ 题解 既然是一段区间 首先就要变成单点 所以求一个前缀和 这个时候贪心很明显了: 枚举每一个点和可以和它组成一段的可行的点 全部丢进一 ...

  8. 【转】每个 Linux 新手都应该知道的 10 个命令

    你可能认为你是 Linux 新手,但实际上并不是.全球互联网用户有 3.74 亿,他们都以某种方式使用 Linux,因为 Linux 服务器占据了互联网的 90%.大多数现代路由器运行 Linux 或 ...

  9. 前端学习 -- Css -- 属性选择器

    属性选择器:根据元素的属性选择指定元素 语法:[属性名] 选取含有指定属性的元素 [属性名="属性值"]:选取属性值等于指定值的元素 [属性名^="属性值"]: ...

  10. [NOI2011]阿狸的打字机——AC自动机之fail树的利用

    Description 阿狸喜欢收藏各种稀奇古怪的东西,最近他淘到一台老式的打字机.打字机上只有28个按键,分别印有26个小写英文字母和'B'.'P'两个字母. 经阿狸研究发现,这个打字机是这样工作的 ...