第一部分: H5的本地存储技术

HTML5 提供了两种在客户端存储数据的新方法。
先看下面的例子:

例1:
var mySelection = {name:"car", amount:2};
localStorage.mySelection = JSON.stringify(mySelection);
console.log(localStorage.mySelection);

var mySelection2 = JSON.parse(localStorage.mySelection);
console.log(mySelection2.name);
console.log(mySelection2.amount);

例2:(把上述代码中的localStorage替换成 sessionStorage)

例1是把本网站的资料mySelection存储到本地,这样本网站的各个页面都可以使用此数据。而且,任何时候打开本网站都还可以继续使用它。

例2和例1的唯一区别是,用sessionStorage,在关闭本网站各页面之后,数据失效,下次再打开时候, 这些数据都不可用。

说明:HTML5 提供了两种在客户端存储数据的新方法:
localStorage - 可以无限期保持
sessionStorage - 只在本session中有效, 关闭页面之后,就无效了
(除了有效期不同之外, 二者的其余方面都相同, 所以,为了简单起见,下面把二者统称"localStorage");

与之前的 cookie 技术相比:
* 这两张存储的可用空间更大 (5M, 每个网站)
* 不必上传给服务器, 节省带宽
* 同源的各个页面都可以存取
* 比cookie的存取方法更直接,

限制:
* localStorage只能存储成字符串形式, 不能直接保存数字和布尔变量。
所以, 其它类别一般都转成JSON格式存储

第二部分 Cookie
cookie是存储于用户计算机中的变量。每当用户从同一台计算机同一个浏览器请求某个页面的时候,就会发送该页面的所有cookie给服务器。

例子:一个完整的cookie
document.cookie = "username=John; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

上面的代码存储了这样一个cookie:
变量名称username, 取值"John",
失效日期时间: 18 Dec 2013 12:00:00 UTC
页面路径: "/"

从上面可以看出, cookie的形式比较复杂,JQuery有一个
名为“JQuery Cookie"的插件,使用方法如下:
$.cookie('name', 'John', { expires: 7, path: '/' }); //指定7天以后失效
console.log($.cookie('name'));

H5的本地存储技术及其与Cookie的比较的更多相关文章

  1. H5本地存储技术和微信小程序中的本地存储

    1.H5的本地存储 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  2. localStorage本地存储技术

    localStorage 本地存储技术 本地存储技术,“不是永久的永久存储” 特点: 将数据存储到浏览器当中 存储的数据都是以字符串的形式存储的 和传统的数据库相比: 优点: 操作简单,容易学习 数据 ...

  3. H5本地存储技术

    H5 Web存储技术 前言 web存储技术在初期的时候被定义为HTML5的一部分作为其API.后来被独立出来作为一份独立的标准. web存储标准包含localStorage对象和sessionStor ...

  4. H5的本地存储(localStorage)和cookie比较

    HTML5 的 web Storage 存储方式有两种:localStorage 和 sessionStorage. sessionStorage就像是会话级别的cookie,数据会随着浏览器关闭而清 ...

  5. 彻底搞懂Html5本地存储技术(一)

    一.H5之前客户端本地存储的实现 1. cookies cookies的应用比较广泛,但有以下几个问题: (1)每次http请求头上会带着,浪费资源 (2)每个域名客户端只能存储4K大小 (3)会造成 ...

  6. H5的本地存储

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

  7. 15个JavaScript本地存储技术的函数库和工具

    当构建更复杂的JavaScript应用程序运行在用户的浏览器是非常有用的,它可以在浏览器中存储信息,这样的信息可以被共享在不同的页面,浏览会话. 在最近的过去,这将有可能只被cookies文本文件保存 ...

  8. 性能:15个JavaScript本地存储技术的函数库和工具

    当构建更复杂的JavaScript应用程序运行在用户的浏览器是非常有用的,它可以在浏览器中存储信息,这样的信息可以被共享在不同的页面,浏览会话. 在最近的过去,这将有可能只被cookies文本文件保存 ...

  9. 关于视频断点续播和H5的本地存储

    前段时间,需要在下实现一个视频的断点续播功能,呃,我不会呀,这就很尴尬了.然后呢,在下就想起了一个叫做localStorage的东西.这是个什么东西呢?在网上查阅了一些资料后,在下发现这是webSto ...

随机推荐

  1. 转载:VC++6.0注释快捷键设置,略有修改

    在Qt Creator,eclipse等编辑器中,都默认有注释代码的快捷键:Ctrl + /. 注释快捷键在程序编程当中的作用相当明显,提高了编程效率.我在网上找到了一个在VC++6.0工具中添加注释 ...

  2. linux之文件增删改查

  3. the implemention of redblack tree

    public class redbalcktree { private class Node{ private int val; private int key; boolean color; //b ...

  4. 第k大元素

    在数组中找到第k大的元素 样例 给出数组[9,3,2,4,8],第三大的元素是4 给出数组 [1,2,3,4,5],第一大的元素是5,第二大的元素是4,第三大的元素是3,以此类推 注意 你可以交换数组 ...

  5. es6学习日记5-对象的扩展

    属性的简洁表示法 ES6 允许直接写入变量和函数,作为对象的属性和方法.这样的书写更加简洁. const foo = 'bar'; const baz = {foo}; baz // {foo: &q ...

  6. 内网服务器设置NAT123端口映射,方便外网连接;如何测试端口连通情况。

    一.nat123设置端口映射. 1)首先去nat123官网注册账号. http://www.nat123.com/ 2)下载nat123客户端 http://www.nat123.com/Pages_ ...

  7. 关于函数式编程(Functional Programming)

    初学函数式编程,相信很多程序员兄弟们对于这个名字熟悉又陌生.函数,对于程序员来说并不陌生,编程对于程序员来说也并不陌生,但是函数式编程语言(Functional Programming languag ...

  8. CodeForce 517 Div 2. B Curiosity Has No Limits

    http://codeforces.com/contest/1072/problem/B B. Curiosity Has No Limits time limit per test 1 second ...

  9. 导入导出Oracle

  10. range的新发现

    正向打印的时候 for i in range(2): print(i) 打印的结果 0 1 反向的时候 for i in range(2,-1,-1): print(i) 2 1 0 for i in ...