JS的本地保存localStorage、sessionStorage用法总结

localStorage、sessionStorage是Html5的特性,IE7以下浏览器不支持

为什么要掌握localStorage、和sessionStorage。

JS中为了减少与服务器的通信,经常会用到保存的数据到本地的功能,

例如本地用户信息保存。

      localStorage和sessionStorage的区别:

(1)、localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。

(2)、他们均只能存储字符串类型的对象(虽然规范中可以存储其他原生类型的对象,但是目前为止没有浏览器对其进行实现)。

(3)、localStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在。

sessionStorage生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么所有通过sessionStorage存储的数据也就被清空了

(4)、不同浏览器无法共享localStorage或sessionStorage中的信息相同浏览器的不同页面间可以共享相同的localStorage(页面属于相同域名和端口),但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是,页面及标签页仅指顶级窗口,如果一个标签页包含多个iframe标签且他们属于同源页面,那么他们之间是可以共享sessionStorage的。

(5)、

http://www.test.com

https://www.test.com (不同源,因为协议不同)

http://my.test.com(不同源,因为主机名不同)

http://www.test.com:8080(不同源,因为端口不同)

     localStorage、和sessionStorage的用法:

  • localStorage和sessionStorage使用时使用相同的API:

    localStorage.setItem("key","value");//以“key”为名称存储一个值“value”

    localStorage.getItem("key");//获取名称为“key”的值

    枚举localStorage的方法:

    for(var i=0;i<localStorage.length;i++){

    var name = localStorage.key(i)​;

    var value = localStorage.getItem(name);​

    }

    删除localStorage中存储信息的方法:

    localStorage.removeItem("key");//删除名称为“key”的信息。

    localStorage.clear();​//清空localStorage中所有信息

sessionStorage和localStorage的区别的更多相关文章

  1. cookies,sessionStorage 和 localStorage 的区别

    请描述一下 cookies,sessionStorage 和 localStorage 的区别? sessionStorage 和 localStorage 是HTML5 Web Storage AP ...

  2. 7,请描述下cookies,sessionStorage和localStorage的区别

    7,请描述下cookies,sessionStorage和localStorage的区别 首先,cookie是网站为了标识用户身份而储存在用户本地终端(client side,百科: 本地终端指与计算 ...

  3. cookies、sessionStorage和localStorage的区别

    cookies.sessionStorage和localStorage的区别 对比 特性 Cookie LocalStorage SessionStorage 数据的生命周期              ...

  4. [Html5]sessionStorage和localStorage的区别

    摘要 有时需要在浏览器中保存一些数据,特别在app中嵌入的h5页面中,需要在webview中保存一些数据,作为客户端的数据持久化. h5中web storage有两种存储方式:sessionStora ...

  5. cookies,sessionStorage和localStorage的区别

    联系: sessionStorage和localStorage一样,都是用来缓存客户端缓存信息. 他们都只能存储字符串类型对象. 区别: localStorage的生命周期是永久的,除非用户主动清除浏 ...

  6. Cookie、sessionStorage、localStorage的区别

    共同点:都是保存在浏览器端,且同源的.区别:cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递.而sessionStorage和localStora ...

  7. 描述一下 cookies,sessionStorage 和 localStorage 的区别?

    sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据.有了本地数据,就可以避免数据在浏览器和服务器间不必 ...

  8. cookies,sessionStorage,localStorage的区别

    sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据.有了本地数据,就可以避免数据在浏览器和服务器间不必 ...

  9. cookies,sessionStorage和localStorage的区别

    共同点:都是保存在浏览器端,且同源的.区别:cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递.而sessionStorage和localStora ...

  10. cookie、sessionStorage、localStorage的区别?

    数据存储位置 三者都是存储在游览器本地的 区别在于cookie是服务器端写入的,而sessionStorage.localStorage是由前端写入的 生命周期 cookie的生命周期是由服务器端写入 ...

随机推荐

  1. Android6.0源码下载编译刷入真机

    编译环境是Ubuntu12.04.手机nexus 5,编译安卓6.0.1源码并烧录到真机. 源码用的是科大的镜像:http://mirrors.ustc.edu.cn/aosp-monthly/,下载 ...

  2. (网页)人人都会的35个Jquery小技巧

    转自CSDN: 收集的35个 jQuery 小技巧/代码片段,可以帮你快速开发. 1. 禁止右键点击 $(document).ready(function(){ $(document).bind(&q ...

  3. Jmeter中默认语言的显示

    1.临时性语言的设置 即设置后只对本次使用有效,重启后恢复默认语言 选择Options—>Choose Language—>选择其他语言(例如:Chinese(Simplified)简体中 ...

  4. 非对称加密与GPG/PGP

    最近浏览博客的时候,经常会看到博主展示出自己的公钥,于是对 GPG/PGP 产生兴趣.下面简单记录相关文章的链接,方便以后了解. 简介: 1991年,程序员Phil Zimmermann为了避开政府的 ...

  5. linux中crw brw lrw等等文件属性是什么

    今天在查看 /dev/fuse 文件的属性的时候,看到了crw_ 权限位,一时反应不过来: [root@localhost ~]# ll /dev/fuse crw-rw-rw-. root root ...

  6. windows10不能获取有效IP的问题

    最近我的windows10系统一直不能有效获取IP地址(无论有线还是无线),但手工设置IP后又能正常上网,所以怀疑是某个服务未启动的原因. 查了一下百度,发现还真是,现将解决方案记录如下: 1.打开系 ...

  7. oracle order by 排序

    Syntax ORDER BY { column-Name | ColumnPosition | Expression } [ ASC | DESC ] [ NULLS FIRST | NULLS L ...

  8. Git学习记录 力做全网最强入门教程

    目录 Git学习记录 力做全网最强入门教程 什么是GitHub? 什么是Git? Git的配置 Git的安装(只介绍windos操作系统下) Git的配置 至此我们的入门教程到此结束,更新中级教程要等 ...

  9. Python 操作 Excel,总有一个模块适合自己

    最近在写性能相关的测试脚本,脚本已经完成,最终怎么体现在报告上,要想让报告看起来漂亮些,我们是先创建一个模板(格式和公式已全部制作好),只需要性能测试完成后往对应的sheet页中填充数据,数据完成后最 ...

  10. 公式编辑器MathType基本使用方法总结----应付本科毕业论文完全没问题啦^_^

    本人计算数学专业毕业,写毕业论文和外文翻译的时候会遇到大量公式需要编辑,而且学校一般都要求用word.但是Word自带的公式编辑器只支持一种字体,当公式中涉及到特殊字体就不太方便了.如果用Latex来 ...