介绍两个在客户端存储数据的 API

localStorage与sessionStorage

两个都是window对象的属性，利用这两个属性，可以在客户端存储一些数据

相比cookie，这种存储方式的优点在于能存储更多的数据，且数据不会跟随http协议发送回客户端

localStorage 可以说是永久的存储，存储的数据会一直存在，直到浏览器清除缓存，or 使用JS清除

sessionStorage 顾名思义 存储的数据只在会话中有效 当关闭标签页或者浏览器 存储的数据就会被清除

两种存储方式 只是在存储数据的时间上有所区别，调用都使用了同样的方法

　　setItem 接收一个参数，格式"key:value" 类似cookie

　　getItem 接收一个key 返回对应的value

　　removeItem 接收一个key 删除对应的key和value

　　clear 清除所有的数据

对于JS这门语言来讲，这些方法不是必须的，可以使用方括号或者是点号来访问，设置，更新,删除一个key的value

这样更简洁

博客园的localStorage

　　你在博客园写博客的时候，也可以看看当前页面的localStorage,里面也保存了你写的博客

　　一个属性是draftBody保存了你在编辑器中打出的文字和HTML代码

　　draftTitle保存文章的标题

客户端存储 API的更多相关文章

  1. js-新兴的API,最佳实践,离线应用于客户端存储

    离线应用于客户端存储: 1.离线检测:online以及offline事件,都是在window对象上触发 navigator.online为true的时候是表示设备能够上网 2.使用一个描述文件(man ...

  2. JavaScript的客户端存储

    一.前言: 客户端存储实际上就是Web浏览器的记忆功能,通过浏览器的API实现数据存储到硬盘: 二.存储的不同形式: 1.Web存储:localStorage 和 sessionStorage 代表同 ...

  3. js023-离线应用与客户端存储

    js023-离线应用与客户端存储 本章内容: 进行离线检测 使用离线缓存 在浏览器中保存数据 23.1 离线检测 第一步:知道设备是在线还是离线:navigator.Online属性.该值为true表 ...

  4. Web - 客户端存储的几种方式

    客户端存储主要方便一些APP离线使用.今天就来说说客户端存储的方法有多少? 说在最前面的一句:所有的客户端存储都有一个原则:读写的数据必须要同域 1 Cookie Cookie是一项很老的技术的,就是 ...

  5. 《javascript高级程序设计》 第23章 离线应用与客户端存储

    23.1 离线检测23.2 应用缓存23.3 数据存储 23.3.1 Cookie 23.3.2 IE 用户数据 23.3.3 Web 存储机制 23.3.4 IndexedDB   23.1 离线检 ...

  6. HTML5 客户端存储数据的两种方式

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

  7. 动画优化、客户端存储、历史记录、worker

    一.requestAnimationFrame 1.requestAnimationFrame怎么用? 设置关键帧动画效果,注重关键帧执行的情况,用法与setTimeout一样 2.requestAn ...

  8. 离线应用与客户端存储（cookie storage indexedDB）

    离线检测 HTML5定义一个属性:navigator.onLine的属性.这个属性值为true,表示设备在线,值为false,表示设备离线.为了更好的确定网络是否可用,HTML5还定义了两个事件.这两 ...

  9. 《JavaScript》web客户端存储

    Web存储: 兼容IE8在内的所有主流浏览器,不兼容早期浏览器:支持大容量但非无限量 LocalStorage和sessionStorage是window对象的两个属性,这两个属性都代表同一个stor ...

随机推荐

  1. Java中ArrayList,Vector,LinkedList,HashMap,HashTable,HashSet对比及总结

    1.所有的集合的父类都是Collection的接口 2.Set List Map 区别 A  在Set里面:无法添加元素的顺序,所以Set里面的元素不能重复 B  在List中:有索引号,类似于数组, ...

  2. 构造函数与普通函数的区别还有关于“new”操作符的一些原理

    有一种创建对象的方法叫做工厂模式,例如: function person(name,age){ var o=new Object(); o.name=name; o.age=age; return o ...

  3. struts2 之 【struts2简介，struts2开发步骤，struts2详细配置，struts2执行流程】

    入门框架学习避免不了的问题: 1. 什么是框架? 简单的说,框架就是模板,模子,模型.就是一个可重用的半成品. 2. 如何学习框架? 学习框架其实就是学习规则,使用框架就是遵循框架的规则,框架是可变的 ...

  4. AFNetworking 用法详解

    之前一直使用ASIHttpRequest 做网络请求 ,后来新公司用AFNetWorking ,经过一段时间学习总结一下二者的优缺点: 1.AFNetWorking的优缺点 优点: 1.维护和使用者比 ...

  5. 接触响应式-css3-media判断屏幕分辨率

    // IE6.7.8不支持css3    使用响应式一般用bootstrap框架(IE8使用时须引用Respond.js)而不用原生JS 外联式: <link type="text/c ...

  6. Redis编码问题

    最近搞redis存储对象出了点问题,大概说一下背景,项目原有的东东以前存的是redis,存储的直接是对象模型,没有问题,这里存储对象存储任何信息事都没有问题的.但是现在调整为存储序列化的json字符串 ...

  7. three.js提供的几何体

    1.简单几何体 three.js提供的稍微简单点的几何体包括有:PlaneGeometry(平面).CircleGeometry(圆形).ShapeGeometry(塑性).CubeGeometry( ...

  8. 我使用的Chrome插件列表

    AdBlock 用来屏蔽广告的,有一些网站会探测出你在使用AdBlock.如果一定要继续浏览的话,你可能需要暂停一下AdBlock Vimium 非常推荐喜欢vim的用户试试看这款插件,它的主要特色是 ...

  9. cookie方法封装及cookie缺点分析

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Consolas; color: #4f5d66 } p.p2 { margin: 0.0px ...

  10. es6面试问题——Promise

    话说刚换工作一个月有余,在上家公司干的实在是不开心,然后就出来抱着试试的心态出来面了几家公司,大多数公司问的前端问题也就那么多,其中有个面试问题让我记忆犹新,只因为没有答上来,哈哈! 当时面试官问我怎 ...