HTML5 提供了两种在客户端存储数据的新方法:

localStorage:

  (1)它的生命周期是永久的,关闭页面或浏览器之后localStorage中的数据也不会消失。

  (2)它的容量大小是5M作用,而cookie一般就4kb.

  (3)它不能设置过期时间,需要自己处理清除,而cookie可以设置过期时间。

  (4)它的保存方式是明文暴露的,而cookie是保存在密文的

  (5)常用方法:

         (1)设置缓存:localstorage.set("myname" , "legendheng");

         (2)获取缓存:localstorage.get("myname" );

         (3)清除某个缓存:localstorage.remove("myname" );

         (4)清除全部缓存:localstorage.clear();

在控制台调试器下的例子:

sessionStorage:

  (1)它的生命周期是在仅在当前会话下有效,即使刷新页面同样存在,但关闭浏览器后会数据清除。

  (2)它的使用方法和localstorage基本相同,只不过是把localstorage改成sessionstorage

  (5)常用方法:

         (1)设置缓存:sessionStorage.set("myname" , "legendheng");

         (2)获取缓存:sessionStorage.get("myname" );

         (3)清除某个缓存:sessionStorage.remove("myname" );

         (4)清除全部缓存:sessionStorage.clear();

在控制台调试器下的例子:

两者的兼容比较:

html5新特性localStorage和sessionStorage的更多相关文章

  1. hybrid app开发中用到的html5新特性localStorage、sessionStorage和websql database

    近期在项目中进行hybrid app开发,项目中有大量的js代码执行在android设备上. 使用到了非常多HTML5的新特性,之前没有遇到过,不了解.这里记录下添加点前端的知识.混合式app开发中. ...

  2. html5新特性

    这一篇博文不会告诉你怎么去使用html5的新特性,只会给你总结一下新特性------对于好学的人可以把这篇文章当做一个目录 对于初接触的人来说是一个导向 对于已经接触过的人来说是一个检测你掌握程度的检 ...

  3. web全栈架构师[笔记] — 03 html5新特性

    HTML5新特性 一.geolocation PC端 精度比较低 通过IP库定位 移动端 通过GPS window.navigator.geolocation 单次 getCurrentPositio ...

  4. 第二季第八天 HTML5新特性

    在函数内部window.a =  a  在全局中就可以拿到这个变量 变量命名.作为函数的参数的时候要详细.调用的时候可以简单点 做全局变量的两个方案 1.绑在标签上data 2.闭包 视频一般都是二进 ...

  5. 前端进阶系列(三):HTML5新特性

    HTML5 是对 HTML 标准的第五次修订.其主要的目标是将互联网语义化,以便更好地被人类和机器阅读,并同时提供更好地支持各种媒体的嵌入.HTML5 的语法是向后兼容的.现在国内普遍说的 H5 是包 ...

  6. HTML5新特性 websocket(重点)--多对多聊天室

    一.html5新特性  websocket(重点)--多对多聊天室 HTTP:超文本传输协议 HTTP作用:传输网页中资源(html;css;js;image;video;..) HTTP是浏览器搬运 ...

  7. 转: HTML5新特性之Mutation Observer

    转: HTML5新特性之Mutation Observer Mutation Observer是什么 Mutation Observer(变动观察器)是监视DOM变动的接口.当DOM对象树发生任何变动 ...

  8. HTML5新特性之CSS+HTML5实例

    1.新的DOCTYPE和字符集 HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. <!DOCTYPE html> 同时字符集声明也被简化了: <meta c ...

  9. HTML5新特性:FileReader 和 FormData

    连接在这里: HTML5新特性:FileReader 和 FormData

随机推荐

  1. SpringBoot+MyBatis中自动根据@Table注解和@Column注解生成增删改查逻辑

    习惯使用jpa操作对象的方式,现在用mybatis有点不习惯. 其实是懒得写SQL,增删改查那么简单的事情你帮我做了呗,mybatis:NO. 没办法,自己搞喽! 这里主要是实现了通过代码自动生成my ...

  2. webapi文件上传和下载

    文件上传我们可以做上传文件保存到图片与导入数据,下载可以下载多样的文件. 上传:实例是单个文件导入 NopiHelper:地址 ①简单的上传图片进行保存,方法跟MVC中的一样 <form nam ...

  3. Linux本地数据上传到阿里云OSS

    这篇文章主要是介绍如何将服务器本地的数据上传到阿里云OSS的指定bucket中,最重要的参考文档是数据迁移单机部署.我第一次上传数据到OSS上时,步骤要比前面的链接中介绍的要麻烦,ossimport工 ...

  4. Vue指令 常见的几个内置指令

    1.v-if指令:判断指令,根据表达式值得真假来插入或删除相应的值. 2.v-show指令:条件渲染指令,无论返回的布尔值是true还是false,元素都会存在在html中,只是false的元素会隐藏 ...

  5. xcode10不兼容问题解决方法,framework编译脚本

    XCode10报错:Build/Intermediates.noindex/XCBuildData/build.db": disk I/O error 更改-scheme 为-target ...

  6. Java Activiti 流程审批 后台框架源码 springmvc SSM 工作流引擎

    即时通讯:支持好友,群组,发图片.文件,消息声音提醒,离线消息,保留聊天记录 工作流模块-------------------------------------------------------- ...

  7. Java解析Excel之应用Reflection等技术实现动态读取

    目录树 背景 技术选型 问题分析 技术要点及难点分析 源码分析 测试用例 背景 Tip:因为产品提的需求我都开发完了,进行了项目提测:前天老大走过来说:你用spring-boot开发一个解析Excel ...

  8. Mac 模拟慢速网络

    作为开发者,为了提升用户体验,有时需要模拟不同环境的网络.Mac环境下模拟慢速网络可以使用苹果官方提供的工具:Network Link Conditioner. 1.点击苹果开发者网站提供的下载页面, ...

  9. Vue packages version conflicts 错误修复

    我们在使用Vue作为weex中的前端框架的开发过程中,某次 npm start 遇到了如下的错误: Vue packages version mismatch: - vue@2.5.16 - vue- ...

  10. mvc.net路由中带特殊字符如【.*/\】等时遇到的天坑

    用mvc.net的路由做网站伪静态时出现的天坑,自己一直没测试出来,竟然要靠客户被坑了后才知道 解决办法 参考https://stackoverflow.com/questions/16581184/ ...