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

相关文章

来自专栏进击的程序猿

php异常处理 之 BooBoo库介绍

本文介绍php开源库BooBoo,是一个处理php异常和错误的开源库,通过简单的分析代码,我们知道了实际项目中怎么正确的设置错误和异常。

1042
来自专栏大内老A

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

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

2035
来自专栏Google Dart

Dart服务器端 shelf包 原

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

3061
来自专栏数据之美

论 Python 装饰器控制函数 Timeout 的正确姿势

1、问题背景 之前在这篇《Python RPC 远程调用脚本之 RPyC 实践》中实现过一个小 Demo,通过 RPyC 可以实现一个简单的分布式程序,但是,有...

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

Java开发必会框架Struts2第一天

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

3668
来自专栏Java 源码分析

Struts2笔记(三)

拦截器,struts2方庄了很多功能,这些功能都是使用拦截器来实现的。一般的拦截器只是执行默认的拦截器,就是在struts-core这个包里面,然后李 main...

3379
来自专栏FreeBuf

一次安全测试引发的对Django框架文件上传安全机制的初步分析

我司的堡垒机是基于jumpserver 0.3版本进行二次开发,进行了大量的重构和新功能的添加,基本满足了公司安全运维的需求。在对文件上传接口进行安全审计的时候...

1172
来自专栏黑泽君的专栏

day25_Struts2学习笔记_01

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

1491
来自专栏python学习路

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

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

4847
来自专栏Albert陈凯

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

2025

扫码关注云+社区

领取腾讯云代金券