Html5 中的存储包括两种:sessionStorage 和 localStorage
 
sessionStorage

用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。

localStorage

用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

web storage和cookie的区别

Web Storage的概念和cookie相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用。

除此之外,Web Storage拥有setItem,getItem,removeItem,clear等方法,不像cookie需要前端开发者自己封装setCookie,getCookie。

但是Cookie也是不可以或缺的:Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而Web Storage仅仅是为了在本地“存储”数据而生

Cookie的使用

//写cookies
function setCookie(name, value) {
  var Days = 30;
  var exp = new Date();
  exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
  document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
} //读取cookies
function getCookie(name) {
  var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");   if (arr = document.cookie.match(reg)) {
    return unescape(arr[2]);
  }
  else {
    return null;
  }
} //删除cookies
function delCookie(name) {
  var exp = new Date();
  exp.setTime(exp.getTime() - 1);
  var cval = getCookie(name);
  if (cval != null) {
   document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
  }
}

localStorage和sessionStorage的使用

//setItem存储value
//用途:将value存储到key字段
//用法:.setItem( key, value)
//代码示例:
sessionStorage.setItem("key", "value");
localStorage.setItem("site", "js8.in"); //getItem获取value
//用途:获取指定key本地存储的值
//用法:.getItem(key)
//代码示例:
var value = sessionStorage.getItem("key");
var site = localStorage.getItem("site"); //removeItem删除key
//用途:删除指定key本地存储的值
//用法:.removeItem(key)
//代码示例:
sessionStorage.removeItem("key");
localStorage.removeItem("site"); //clear清除所有的key/value
//用途:清除所有的key/value
//用法:.clear()
//代码示例:
sessionStorage.clear();
localStorage.clear();

Html5的本地储存 Web Storage的更多相关文章

  1. H5本地储存Web Storage

    一.本地存储由来的背景 由于HTML4时代Cookie的大小.格式.存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息,那么只能借助于Cookie.但是Cookie的这些限制,也就导致了C ...

  2. 解析H5本地储存Web Storage

    一.本地存储由来的背景 由于HTML4时代Cookie的大小.格式.存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息,那么只能借助于Cookie.但是Cookie的这些限制,也就导致了C ...

  3. HTML5 本地存储Web Storage简单了解

    ​HTML5本地存储规范,定义了两个重要的API :Web Storage  和  本地数据库Web SQL Database. 本地存储Web Storage 实际上是HTML4的cookie存储机 ...

  4. HTML5本地存储 Web Storage

    Web Storage基本介绍 HTML5 定义了本地存储规范 Web Storage , 提供了两种存储类型 API  sessionStorage 和 localStorage,二者的差异主要是数 ...

  5. html5本地存储web storage的简单使用

    html5的一个非常cool的功能,就是web storage,类似于之前的cookie,不过与之不同的是,web storage 拥有本地5兆的容量可以存储,而cookie却只有4K,这是完全不能比 ...

  6. 本地存储 web storage

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. HTML5中本地储存概念是什么,什么优点 ,与cookie有什么区别?

    html5中的Web Storage 包括了两种存储方式: sessionStorage  和  localStorage. seessionStorage 用于本地存储一个会话(session)中的 ...

  8. HTML5 高级系列:web Storage

    前言 HTML5 的 web Storage 存储方式有两种:localStorage 和 sessionStorage. 这两种方式都是通过键值对保存数据,存取方便,不影响网站性能.他们的用法相同, ...

  9. 【HTML5 localStorage本地储存】简介&基本语法

    了解localStorage localStorage是最新的HTML5中的新技术,它主要是用于本地储存.最近看了看localStorage,发现比cookie好多用了,还比cookie简单多了.于是 ...

随机推荐

  1. golang学习之select用法

    早期的select函数是用来监控一系列的文件句柄,一旦其中一个文件句柄发生IO操作,该select调用就会被返回.golang在语言级别直接支持select,用于处理异步IO问题. select用法同 ...

  2. javascript预编译和执行过程总结

    javascript相对于其它语言来说是一种弱类型的语言,在其它如java语言中,程序的执行需要有编译的阶段,而在javascript中也有类似的“预编译阶段”(javascript的预编译是以代码块 ...

  3. 如何删除eclipse中已经保存的svn密码

    一.打开eclipse--->点击Window--->点击Perference,打开eclipse配置,输入svn,然后点击svn,找到下方svn接口,查看下svn是什么类型的接口,如果是 ...

  4. 初进JAVA职场面试小技巧:一个老学长的吐血之作!

    看着一批批小白的遭遇,有些无奈,又跟我年轻时有些类似.今天正好有点时间,给你几个建议. 1.在结业之前一定要把自己参与过的项目仔细审视一下,一点要特别熟悉项目的流程功能,另外也要重视自己做过的模块,看 ...

  5. Java面试题之HashMap阿里面试必问知识点,你会吗?

    面试官Q1:你用过HashMap,你能跟我说说它的数据结构吗? HashMap作为一种容器类型,无论你是否了解过其内部的实现原理,它的大名已经频频出现在各种互联网Java面试题中了.从基本的使用角度来 ...

  6. javascript实现文本框标签验证

    < !DOCTYPE html > <html lang = "en" > <head > <meta charset = "U ...

  7. Scrapy爬虫requests

    requests 模块 模块的由来: 浏览器可以浏览网站, 是由于浏览器发送了requests , 各种请求.打开一个网站可能有几十到几百个请求. 从而服务器端会反馈各种因应不同请求生成的数据. 我们 ...

  8. Java Jsp使用

    1.Jsp基础 1)Jsp的执行过程 tomcat服务器完成:jsp文件->翻译成java文件->编译成class字节码文件-> 构造类对象-> 调用方法 tomcat的wor ...

  9. Linux基础之-shell script(变量,运算符,流程控制,函数)

    一.shell script Shell 脚本(shell script),是一种为shell编写的脚本程序.业界所说的shell通常都是指shell脚本,但读者朋友要知道,shell和shell s ...

  10. (转) AJAX POST&跨域 解决方案 - CORS

    跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,主要原因还是由于安全限制(同源策略, 即JavaScript或Cookie只能访问同域下的内容),因为我们在日常的项目开发时会不可避免 ...