Web Storage包括了两种存储方式:sessionStorage和localStorage

sessionStorage 是会话级别的存储,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。

localStorage 是持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

Web Storage与cookie异同

  1. cookie 支持的数据内容小,8k左右。localStorage目前能支持到10M。
  2. 每次请求一个新的页面的时候Cookie都会被发送过去,浪费了带宽。
  3. cookie 需要指定作用域,不可以跨域调用。
  4. Web Storage 拥有setItem,getItem,removeItem,clear等方法,cookie 需要前端开发者自己封装setCookie,getCookie方法。

localStorage浏览器支持情况

 <script type="text/javascript">
// method one
if(window.localStorage){
alert("浏览支持localStorage")
}else{
alert("浏览暂不支持localStorage")
}
// method two
if(typeof window.localStorage == 'undefined') {
alert("浏览暂不支持localStorage")
}
</script>

localStorage和sessionStorage操作

  • localStorage.setItem(key,value)    // 设置键值对
  • localStorage.getItem(key)      // 通过键值读取对应的值
  • localStorage.removeItem(key)    // 通过键值移除对应的值
  • localStorage.clear()        // 初始化localStorage,清除所有键值对
  • localStorage.key(index)     // 通过下标index来获取指定索引的key名

其他操作方法:点操作和[ ]

 <script type="text/javascript">
var storage = window.localStorage;
storage.key1 = "hello";
storage["key2"] = "world";
console.log(storage.key1);
console.log(storage["key2"]);
</script>

相关:IE专属存储 UserData.

html5 Web Storage(localStorage(),sessionStorage())的更多相关文章

  1. HTML5存储 ——Web Storage(localStorage 和 sessionStorage)

    一.localStorage对象临时储存API 方法: 1.localStorage.setItem(key,value)---设置存储内容 2.localStorage.getItem(key)-- ...

  2. h5本地缓存(localStorage,sessionStorage)

    H5本地存储数据 localStorage,sessionStorage的区别: 相同点:  缓存数据比cookie的范围大; localStorage:关闭浏览器数据不会消失,除非手动删除数据 se ...

  3. [web 前端] web本地存储(localStorage、sessionStorage)

    cp from : https://blog.csdn.net/mjzhang1993/article/details/70820868 web 本地存储 (localStorage.sessionS ...

  4. web本地存储(localStorage、sessionStorage)

    web 本地存储 (localStorage.sessionStorage) 说明 对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:l ...

  5. web 本地存储 (localStorage、sessionStorage)

    web 本地存储 (localStorage.sessionStorage,cookie) localStorage(长期储存):即使关闭浏览器数据也不会删除,除非使用localStorage.cle ...

  6. 使用HTML5 Web存储的localStorage和sessionStorage方式

    localStorage(本地存储),可以长期存储数据,没有时间限制,一天,一年,两年甚至更长,数据都可以使用.sessionStorage(会话存储),只有在浏览器被关闭之前使用,创建另一个页面时同 ...

  7. Html5 web 本地存储 (localStorage、sessionStorage)

    HTML5 提供了两种在客户端存储数据的新方法localStorage,sessionStorage sessionStorage(临时存储) :为每一个数据源维持一个存储区域,在浏览器打开期间存在, ...

  8. web存储机制(localStorage和sessionStorage)

    web存储包括两种:sessionStorage 和 localStorage(都是限定在文档源级别,非同源文档间无法共享) 1.sessionStorage 数据放在服务器上(IE不支持) 严格用于 ...

  9. HTML5 web存储之LocalStorage和sessionStorage

    什么是localstorage 前几天在老项目中发现有对cookie的操作觉得很奇怪,咨询下来是要缓存一些信息,以避免在URL上面传递参数,但没有考虑过cookie会带来什么问题: ① cookie大 ...

随机推荐

  1. mysql查询缓存参数

    由人说mysql查询缓存是鸡肋,也许吧,但还是要看场景: 查询缓存: 开启查询缓存:/etc/my.cnfquery_cache_type=1 重启

  2. 第2章 使用JavaScript

    学习要点: 1.创建一张HTML页面 2.<Script>标签解析 3.JS代码嵌入的一些问题

  3. Git分布式项目管理

          Git简介 Git是什么? Git和SVN一样都是一种高效的管理代码的系统. Git是目前世界上最先进的分布式版本控制系统(没有之一). 创建版本库 什么是版本库呢?版本库又名仓库,英文名 ...

  4. bzoj1832: [AHOI2008]聚会--LCA

    本来觉得这是一道挺水的题目,后来觉得出题人挺变态的= = 半个小时敲完后,内存超限它给我看TLE,还是0ms,后来才发现内存限制64m 然后卡了一个小时后AC了.. 题目大意是在一棵树上找三点的最短路 ...

  5. AppStore审核

    应用被拒分为两种:Binary Rejected 和 Metadata Rejected.前者需要重新上传应用并且重新排队,后者只需要修改信息,不需要重新上传应用. 1.应用内包含检查更新功能 iOS ...

  6. numpy使用

    计算矩阵的一些用法: http://www.360doc.com/content/13/1104/17/9934052_326603249.shtml

  7. js中的回调函数的理解和使用方法

    js中的回调函数的理解和使用方法 一. 回调函数的作用 js代码会至上而下一条线执行下去,但是有时候我们需要等到一个操作结束之后再进行下一个操作,这时候就需要用到回调函数. 二. 回调函数的解释 因为 ...

  8. linux PPTP VPN客户端安装

    转载于http://www.2cto.com/os/201209/157462.html 下载pptp-1.7.2.tar.gz http://pptpclient.sourceforge.net/ ...

  9. 【java基础学习】泛型

    泛型 1. 泛型类(声明的泛型类型静态方法不能使用) class Tools<T>{ private T t; public void set(T t){ this.t = t; } pu ...

  10. asp.net如何在前台利用jquery Ajax调用后台方法

    一 :最近因为帮同事开发项目使用到了asp.net,而我又想实现Ajax异步请求....从网上查询了一下资料之后,原来在asp.net中利用Ajax调用后台方法同样很简单,为了便于自己以后查看,特将此 ...