第一部分: 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. Android 音视频深入 十一 FFmpeg和AudioTrack播放声音(附源码下载)

    项目地址,求starhttps://github.com/979451341/AudioVideoStudyCodeTwo/tree/master/FFmpeg%E6%92%AD%E6%94%BE%E ...

  2. LeetCode Rotatelmage

    ---恢复内容开始--- You are given an n x n 2D matrix representing an image. Ratate the image by 90 degrees( ...

  3. 【转载】Oracle 中count(1) 、count(*) 和count(列名) 函数的区别

    1)count(1)与count(*)比较: 1.如果你的数据表没有主键,那么count(1)比count(*)快2.如果有主键的话,那主键(联合主键)作为count的条件也比count(*)要快3. ...

  4. 将SD卡的音频设置为手机铃声后删除,手机铃声没有恢复到默认的问题

    1. Android7.0,将存储卡中MP3设置为铃声,删除该MP3后,settings中的铃声没有变化,来电铃声也没有变化. 原因:android7.0的新特性 google 默认如此设计,在选择铃 ...

  5. intelij idea设置成eclipse快捷键

    1.导入jar包文件: https://pan.baidu.com/s/1QSd_CY5X_dUUw74evbckXg  密码: 23rq 2.idea -->settting ---> ...

  6. hadoop Non DFS Used是什么

    首先我们先来了解一下Non DFS User是什么? Non DFS User的意思是:非hadoop文件系统所使用的空间,比如说本身的linux系统使用的,或者存放的其它文件   它的计算公式: n ...

  7. PLSQL Developer连接Oracle

    1.安装PLSQL Developer Oracle数据库和PL/SQL Developer的安装步骤,这里就不做叙述了,百度安装方法的时候有说在安装PL/SQL Developer软件时,不要安装在 ...

  8. 在Power BI报表和仪表板中显示刷新日期\时间

    有人最近问我:“如何在报告和仪表板中显示最后刷新数据的日期和时间?”这里有两个简单的技巧在这分享下,也许可以帮助到你. 显示上次刷新日期\时间 要想显示刷新的日期和时间,我们需要在模型本身中存储时间刷 ...

  9. Xcode 运行时配置

    有时候,我们的app在测试时需要连接到一个testing服务器,在打包为企业证书的app时又需要连接到另一个ad hoc 服务器,或者我们想企业证书打包的app和debug模式打包的app有不同的AP ...

  10. mysql locking

    1. 意向锁 https://dev.mysql.com/doc/refman/5.7/en/innodb-locking.html#innodb-insert-intention-locks 官方文 ...