关于HTML5中的sessionStorage和localStorage

需求:

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

   以前用的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只能存储字符串,不能直接存储数组和对象。

例子:

var obj={
        'name':'joke',
        'age':25,
        'weight':'55kg'
            }
  sessionStorage.data=obj;
  console.log(ssessionStorage.data);

看控制台:

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

所以就查资料啊。

发现了JSON。

那么我们这样设置:

var obj={
            'name':'joke',
            'age':25,
            'weight':'55kg'
            }
  var str=JSON.stringify(obj);
  sessionStorage.data=str;
  datas=JSON.parse(sessionStorage.data);
console.log(datas);
console.log(typeof datas)   

再来看控制台:

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

步骤:

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

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

   实例:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏闵开慧

运行wordcount时显示Could not obtain block

该文章接上面hadoop运行wordcount时卡住不动,接着下面 hadoop@ubuntu118:~/hadoop-1.0.2$ bi...

33714
来自专栏智能计算时代

IBM Expands Data Discovery and Q&A Power of Watson Analytics

IBM Expands Data Discovery and Q&A Power of Watson Analytics Half a Million Prof...

2696
来自专栏专知

2018年SCI期刊最新影响因子排行,最高244,人工智能TPAMI9.455

2018年6月26日,最新的SCI影响因子正式发布,涵盖1万2千篇期刊。CA-Cancer J Clin 依然拔得头筹,其影响因子今年再创新高,达244.585...

952
来自专栏闵开慧

Software caused connection abort: socket write...

严重: Servlet.service() for servlet default threw exception java.net.Socke...

39411
来自专栏SAP最佳业务实践

SAP S/4 HANA新变化-CO物料帐(for Ver.1610)

Material Ledger Actual Costing has been activated already in the system before t...

4245
来自专栏闻道于事

js登录滑动验证,不滑动无法登陆

js的判断这里是根据滑块的位置进行判断,应该是用一个flag判断 <%@ page language="java" contentType="text/html...

3838
来自专栏智能计算时代

IBM Research: WatsonPaths

A new cognitive computing project that enables more natural interaction between ...

2967
来自专栏遊俠扎彪

删除Windows右键新建文件类型

Win+R 运行regedit,效果如下:

2129
来自专栏GIS讲堂

Openlayers2唯一值渲染

612
来自专栏搞前端的李蚊子

Html5模拟通讯录人员排序(sen.js)

// JavaScript Document  var PY_Json_Str = ""; var PY_Str_1 = ""; var PY_Str_...

4986

扫码关注云+社区