需求:

  做项目的时大多数情况下我们需要对请求的数据进行多次复用,为了降低请求次数我们需要对请求的数据进行本地存储;

以前用的cooking来存储为本地数据,HTML5后提出sessioStorage、localStorage,那么我们来看看三者的区别(大致了解下,不是本博文重点)。

cooking

Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用。

SessionStorage:
将数据保存在session对象中,所谓session是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间会话,也就是用户浏览这个网站所花费的时间就是session的生命周期。session对象可以用来保存在这段时间内所要求保存的任何数据。
此对象主要有两个方法(还有其他方法,自行选择):
保存数据:sessionStorage.setItem(Key, value);
读取数据:sessionStorage.getItem(Key);
Key:表示你要存入的键名称,此名称可以随便命名,可以按照变量的意思来理解。
Value:表示值,也就是你要存入Key中的值,可以按照变量赋值来理解。
使用方法:
保存数据:sessionStorage.setItem("website", "W3Cfuns.com");
读取数据:sessionStorage.getItem("website");
S
localStorage:
   将数据存储在本地,会一直存在,除非用户主动删除(具体操作看官网),不然不会消失。
  用法和sessionStorage一样。
 
存储在本地时发现个问题,sessionStorage只能存储字符串,不能直接存储数组和对象。
例子:
  1. var obj={
  2. 'name':'joke',
  3. 'age':25,
  4. 'weight':'55kg'
  5. }
  6. sessionStorage.data=obj;
  7. console.log(ssessionStorage.data);

看控制台:

可以很明显的看到输出的字符串,不是我们想要的object。

所以就查资料啊。
发现了JSON。
那么我们这样设置:
  1. var obj={
  2. 'name':'joke',
  3. 'age':25,
  4. 'weight':'55kg'
  5. }
  6. var str=JSON.stringify(obj);
  7. sessionStorage.data=str;
  8. datas=JSON.parse(sessionStorage.data);
  9. console.log(datas);
  10. console.log(typeof datas)

再来看控制台:

哈哈  就是我们想要的object了。

步骤:

  先以字符串形式存入本地存储:stringify

  然后以对象形式取出数据:parse

实例:

关于HTML5中的sessionStorage和localStorage的更多相关文章

  1. HTML5中的sessionStorage和localStorage

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

  2. html5中的SessionStorage 和localStorage

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

  3. Web Storage中的sessionStorage和localStorage

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

  4. 关于HTML5中的sessionStorage的会话级缓存使用

    sessionStorage作为HTML5的Web Storage的两种存储方式之一.    用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数 ...

  5. Html5浏览器缓存 sessionStorage 与 localStorage

    一.sessionStorage: 浏览关闭会话结束就被清除:(不能跨页面) localStorage:永久保存: 二.使用 var storage = window.sessionStorage; ...

  6. 【前端】Html5浏览器缓存 sessionStorage 与 localStorage

    一.sessionStorage: 浏览关闭会话结束就被清除:(不能跨页面) localStorage:永久保存: 二.使用 var storage = window.sessionStorage; ...

  7. 数据存储-cookie、sessionstorage、localstorage

    HTML5 Web Storage sessionStorage 和 localStorage 是 HTML5 Web Storage API 提供的,可以方便的在 web 请求之间保存数据.有了本地 ...

  8. HTML5中的Web Storage(sessionStorage||localStorage)理解与简单实例

    Web Storage是什么? Web Storage功能,顾名思义,就是在Web上针对client本地储存数据的功能,详细来说Web Storage分为两种: sessionStorage: 将数据 ...

  9. HTMl5的存储方式sessionStorage和localStorage详解

    html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage.sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有 ...

随机推荐

  1. div+css基础教程

    本文存下来作为备忘. 第一节  了解div+css 一.什么是div+css div元素是html(超文本语言)中的一个元素,是标签,用来为html文档内大块(block-level)的内容提供结构和 ...

  2. HBase replication

    Hbase Replication 介绍 现状 Hbase 的replication目前在业界使用并不多见,原因有很多方面,比如说HDFS目前已经有多份备份在某种程度上帮助HBASE底层数据的安全性, ...

  3. hadoop任务监控页面namenode:50030(在hadoop配置中查找集群jobtracker的ip,访问50030)

    公司集群,配置的hadoop.执行job,想去看看运行状态,却不知道jobtracker的机器ip: 查询hadoop 的jobtrack机器的ip,就查看文件conf/mapred-site.xml ...

  4. ibm云时代的转型

    好几个月了,有两个说法很流行. 第一个说法,是老有人嚷嚷思科快被SDN整趴下了:第二个说法,是老有人嚷嚷IBM在云计算时代完全落后了,要倒下了. 刚开始我还跟有些人辩论: 1.裁员是西方企业常用的战略 ...

  5. 服务器:SATA、PATA及IDE的比较

    SATA SATA全称是Serial Advanced Technology Attachment(串行高级技术附件,一种基于行业标准的串行硬件驱动器接口),是由Intel.IBM.Dell.APT. ...

  6. OVS+DPDK Datapath 包分类技术

    本文主体内容译于[DPDK社区文档],但并没有逐字翻译,在原文的基础上进行了一些调整,增加了对TSS分类器的详细阐述. 1. 概览 本文描述了OVS+DPDK中的包分类器(datapath class ...

  7. javascript—Mach的一些常用方法

    1.Math.random():返回 0 ~ 1 之间的随机数.   2.Math.round():四舍五入取整. 3.Math.ceil():向上取整;    例如:a=1.2,b=5.8;     ...

  8. VMS项目总结

    开发完一个项目后,如果能够很好的对这个项目做个总结,对我们以后的项目开发以及个人技术的积累都会有很大的帮助.最近在外派公司做完一个系统,在此进行一下深入的总结,也希望给读者带来一些个启示. 一.系统介 ...

  9. JAVA 创建对象4种方法

    java创建对象的几种方式 博客分类: java   (1) 用new语句创建对象,这是最常见的创建对象的方法.(2) 运用反射手段,调用java.lang.Class或者java.lang.refl ...

  10. TensorFlow学习记录(一)

    windows下的安装: 首先访问https://storage.googleapis.com/tensorflow/ 找到对应操作系统下,对应python版本,对应python位数的whl,下载. ...