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

相关文章

来自专栏决胜机器学习

ModernPHP读书笔记(三)——PHP的良好实践

ModernPHP读书笔记(三)——PHP的良好实践 (原创内容,转载请注明来源,谢谢) 一、密码 1、密码不宜用明文存储,也不能用可以解密的...

2866
来自专栏Java 源码分析

Struts2笔记(三)

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

3359
来自专栏技术博客

C#简单的面试题目(六)

76.HashMap和Hashtable的区别。 答:HashMap是Hashtable的轻量级实现(非线程安全的实现),他们都完成了Map接口,主要区别在于H...

752
来自专栏日常学python

python爬虫常用库之urllib详解

这是日常学python的第10篇原创文章 以下为个人在学习过程中做的笔记总结之爬虫常用库urllib urlib库为python3的HTTP内置请求库 uril...

3488
来自专栏黑泽君的专栏

day25_Struts2学习笔记_01

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

931
来自专栏Android机动车

Android热修复简单总结

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

962
来自专栏有趣的Python

Python文件处理 - 专题笔记文件简介文件基础操作文件属性及OS模块使用文件练习

任何语言都离不开对文件的操作,Python语言是如何来操作和管理文件的。掌握文件的基本概念、基本操作,了解文件属性、 linux 系统的文件管理机制及os模块对...

3636
来自专栏FreeBuf

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

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

1012
来自专栏进击的程序猿

php异常处理 之 BooBoo库介绍

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

842
来自专栏技术之路

【swift学习笔记】二.页面转跳数据回传

上一篇我们介绍了页面转跳:【swift学习笔记】一.页面转跳的条件判断和传值 这一篇说一下如何把数据回传回父页面,如下图所示,这个例子很简单,只是把传过去的数据...

2058

扫码关注云+社区