localStorage与sessionStorage

localStoragesessionStorageHTML5提供的对于Web存储的解决方案。

相同点

  • 都与HTTP无关,是HTML5提供的标准,当发起HTTP请求时不会与Cookie一样自动携带。
  • 都是以键值对的形式存在,即Key-Value形式,常用的Api也相同。
  • 存储类型都是String类型,当进行存储时,会调用toString()方法转为String类型。
  • 对于每个域容量是有限的,不同浏览器不一样,大部分存储为5M左右。

不同点

  • localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。
  • SessionStorage会在用户关闭浏览器后,即会话结束后,数据失效;SessionStorage与服务端Session无关。

常用操作

  • 储存数据
localStorage.setItem('key', 'value');
sessionStorage.setItem('key', 'value');
/**
* 由于存储数据会调用 toString() 方法
* Object 类型会存储为 [object Object] 字符串
* 所以进行存储时需调用 JSON.stringify() 转化为字符串
* 取出时调用 JSON.parse() 将字符串转回对象
*/
  • 读取数据
localStorage.getItem('key');
sessionStorage.getItem('key');
  • 删除数据
localStorage.removeItem('key');
sessionStorage.removeItem('key');
  • 清空数据
localStorage.clear();
sessionStorage.clear();

每日一题

https://github.com/WindrunnerMax/EveryDay

LocalStorage与SessionStorage的更多相关文章

  1. 似懂非懂的localStorage和sessionStorage

    一.区别 相信很多人都见过这两个关于HTML5的新名词!HTML5种的web storage包含两种存储方式:localStorage和sessionStorage,这两种方式存储的数据不会自动发给服 ...

  2. html5存储方式localstorage和sessionStorage

    html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. 区别:localStorage无时间限制,除非主动删除数据,否则永不过期:sessio ...

  3. localstorage 和 sessionstorage 本地存储

    在我们日常的工作和实际项目中,做好数据数据缓存可以是我们的程序执行效率更高,可以使我们避免重复请求 服务器,减轻服务器的压力,可以提高使用户的体验度. 那么 HTML5 存储的目标是什么? 1.解决存 ...

  4. Cookie, LocalStorage 与 SessionStorage

    Cookie, LocalStorage 与 SessionStorage相同点 都是储存在用户本地的数据. 意义在于避免数据在浏览器和服务器间不必要地来回传递. 三者的特点     同属于html5 ...

  5. localStorage与sessionStorage 的区别

    通过一枚页面计数器来区别localStorage与sessionStorage. 通过一个计数变量pageconut,每刷新页面,增加的是localStorage的数量,而sessionStorage ...

  6. HTML5 学习笔记(三)——本地存储(LocalStorage、SessionStorage、Web SQL Database)

    一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...

  7. localStorage和sessionStorage

    首先自然是检测浏览器是否支持本地存储. 在HTML5中,本地存储是一个window的属性,包括localStorage和sessionStorage,从名字应该可以很清楚的辨认二者的区别,前者是一直存 ...

  8. HTML5 本地存储 localStorage、sessionStorage 的遍历、存储大小限制处理

    HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localSt ...

  9. html5 Web Storage(localStorage(),sessionStorage())

    Web Storage包括了两种存储方式:sessionStorage和localStorage sessionStorage 是会话级别的存储,这些数据只有在同一个会话中的页面才能访问并且当会话结束 ...

  10. HTML5本地存储之localStorage、sessionStorage

    1.概述 localStorage和sessionStorage统称为Web Storage,它使得网页可以在浏览器端储存数据. sessionStorage保存的数据用于浏览器的一次会话,当会话结束 ...

随机推荐

  1. ndk-stack使用方法(转)

    最近在mac上编译android 版本,各种崩溃让人蛋疼,网上学习了下ndk-stack使用方法. 自己备忘下: 1.运行终端. 跳转到你android sdk 目录 因为你的adb 在里面. 如 c ...

  2. ES6学习总结(五)

    与其说是对象合并,还不如说是JavaScript中对象属性的复制和转移,将多个对象中的属性合并到一个对象中 12345678 var person = { name : 'John', age : 2 ...

  3. 一文搞懂JVM内存结构+GC

    一.jvm是干什么的? 大家都知道java是跨平台语言,一次编译可以在不同操作系统上运行,怎么做到的呢,看下图: javac把写的源代码(java文件),编译成字节码(class文件),字节码部署到l ...

  4. SDWebImage -- 封装 (网络状态检测,是否打开手机网络下下载高清图设置)

    对SDWebImage 进行封装,为了更好的节省用户手机流量,并保证在移动网络下也展示高清图,对使用SDWebImage 下载图片之前进行逻辑处理,根据本地缓存中是否有缓存原始的图片,用户是否打开移动 ...

  5. 基于Noisy Channel Model和Viterbi算法的词性标注问题

    给定一个英文语料库,里面有很多句子,已经做好了分词,/前面的是词,后面的表示该词的词性并且每句话由句号分隔,如下图所示 对于一个句子S,句子中每个词语\(w_i\)标注了对应的词性\(z_i\).现在 ...

  6. python数组和字符串互相转换

    字符串转数组 str = '1,2,3' arr = str.split(',') 数组转字符串 arr = ['a','b'] str = ','.join(arr) arr = [1,2,3] s ...

  7. iMX287A嵌入式Qt环境搭建

    目录 1.嵌入式Qt简介 2.查看开发板Qt库的版本 3.第一个嵌入式Qt程序--Hello World 4.Linux桌面版本Qt环境的搭建 5.注意 @ 1.嵌入式Qt简介 Qt 是一个跨平台的应 ...

  8. @Mapper与@Repository区别

    @Mapper:是mybatis-plus注解 @Repository:是spring注解 @Mapper= @Repository + @MapperScan(basePackages = &quo ...

  9. js事件委托target

    **看一看,瞧一瞧!** 话说要谈事件委托和target.那我们首先来看看什么是事件.话说什么是事件呢?一般的解释是比较重大.对一定的人群会产生一定影响的事情.而在JavaScript中就不是这样了, ...

  10. Kafka体系架构详细分解

    我的个人博客排版更舒服: https://www.luozhiyun.com/archives/260 基本概念 Kafka 体系架构 Kafka 体系架构包括若干 Producer.若干 Broke ...