关于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 条评论
登录 后参与评论

相关文章

来自专栏黑泽君的专栏

day25_Struts2学习笔记_01

  把重复性的繁琐的代码封装起来。使程序员在编码中把更多的精力放业务需求的分析和理解上面。 特点:封装了很多细节,程序员在使用的时候会非常简单。

621
来自专栏Albert陈凯

2018-05-03 Java高级面试题及答案各自的子类比较对比一:

1325
来自专栏青玉伏案

Objective-C中的Block回调模式

        在前面的博客中提到了Block的概念和使用方法,个人感觉Block最爽的用法莫过于在回调时用block。感觉比委托回调和目标方法回调用着要顺手,...

2155
来自专栏小尘哥的专栏

springboot使用properties定义短信模板

通常我们做开发时候会遇到短信发送邮件发送之类的需求,发送内容往往会由客户提供一个模板,如果我们是在程序里拼接字符串来搞定这个模板,很明显是一种坑队友的做法。一般...

783
来自专栏大内老A

ASP.NET Core应用针对静态文件请求的处理[5]: DefaultFilesMiddleware中间件如何显示默认页面

DefaultFilesMiddleware中间件的目的在于将目标目录下的默认文件作为响应内容。我们知道,如果直接请求的就是这个默认文件,那么前面介绍的Stat...

1835
来自专栏Android机动车

Android热修复简单总结

DexClassLoader -> DexPathList -> DexFile -> -> Element -> dexElements.add(elemen...

862
来自专栏沈唁志

在Linux中vim的用法

1682
来自专栏python学习路

八、线程和进程 什么是线程(thread)?什么是进程(process)? 线程和进程的区别?Python GIL(Global Interpreter Lock)全局解释器锁

什么是线程(thread)? 线程是操作系统能够进行运算调度的最小单位。它被包含在进程之中,是进程中的实际运作单位。一条线程指的是进程中一个单一顺序的控制流,一...

3917
来自专栏Google Dart

Dart服务器端 shelf包 原

handler是处理shelf.Request并返回shelf.Response的任何函数。它可以处理请求本身 - 例如,在文件系统上查找请求的URI的静态文件...

1611
来自专栏Java帮帮-微信公众号-技术文章全总结

Java开发必会框架Struts2第一天

一、框架概述 1、框架的意义与作用: 所谓框架,就是把一些繁琐的重复性代码封装起来,使程序员在编码中把更多的经历放到业务需求的分析和理解上面。 特点:封装了很多...

3488

扫码关注云+社区