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. 《Inside C#》笔记(十三) 多线程 下

    一 任务调度 当一个线程的时间片被用尽后,处理器会切换到另一个线程,但关于如何确定执行哪一个线程呢,这就涉及到了线程或任务的优先级. a) 每个线程都有优先级,任务调度算法会根据各线程的不同优先级来决 ...

  2. C++ UTF8 UrlEncode(宽字符)

    为了支持C++ UrlEncode之后的字符串能够被C#所识别(windows phone 下C#只能支持UTF8与 Unicode). 所谓的 UTF8 UrlEncode 也只是宽字符串 UrlE ...

  3. 解决ArrayList线程不安全

    前些天做项目时,程序出现意外的问题,经后来分析是使用ArrayList这个线程不安全的方法导致 解决这个问题通常有两种方法(个人认为) 一:使用synchronized关键字,这个大家应该都很熟悉了, ...

  4. [20180316]共享服务模式和直接路径读.txt

    [20180316]共享服务模式和直接路径读.txt --//在共享服务器模式下,执行计划不会选择直接路径读,通过例子证明. 1.环境:SYS@book> @ &r/ver1PORT_S ...

  5. 05LaTeX学习系列之---TeX的命令行操作

    目录 目录 前言 (一)查看版本号 1.查看TeX的版本号 2.查看LaTeX的版本号 3.查看XeLeTeX的版本号 (二)更行版本 (三)用命令行来编译.tex文件 1.用LaTeX编译 2.用X ...

  6. python--继承关系

    如果子类中定义与父类同名的方法或属性,则自动会覆盖父类对应的方法或属性. 子类完全继承父类的实例 >>> class Parent: def setName(self): print ...

  7. MySQL基本简单操作03

    MySQL基本简单操作 现在我创建了一个数据表,表的内容如下: mysql> select * from gubeiqing_table; +----------+-----+ | name | ...

  8. Sql Server 只有MDF文件恢复数据库的方法以及2008清除日志文件

    首先建立同名的空数据库,然后停止数据库服务运行,将MDF文件覆盖后启动服务,并修改和执行下面的语句. alter database JinMa_NYGL set EMERGENCY alter dat ...

  9. Python3编写网络爬虫08-数据存储方式一-文件存储

    数据存储 用解析器解析出数据之后,就是存储数据了.保存的形式可以多种多样,最简单的形式是直接保存为文本文件,如TXT JSON CSV等.另外还可以保存到数据库中,如关系型数据库MySQL 非关系型数 ...

  10. ASP.NET WebAPI 双向token实现对接小程序登录逻辑

    最近在学习用asp.net webapi搭建小程序的后台服务,因为基于小程序端和后台二者的通信,不像OAuth(开放授权),存在第三方应用.所以这个token是双向的,一个是对用户的,一个是对接口的. ...