第一部分: 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. 羽翼metasploit第一,二季学习笔记

    -----------------第一季-------------------- 启动Metasploit:msfconsole 升级和更新:./msfupdate 直接退出:exit 退回上一级:q ...

  2. eclipse导入git项目出现There are no resources that can be added or removed from the server错误

    上传到git上的项目因为配置了过滤文件,将.settings文件和.project文件都过滤掉了,settings文件中主要存放的是各种插件配置,约束你可以更好的利用IDE进行编码 因为将这两个文件过 ...

  3. vue 关于solt得用法

    solt 第一种用法 父组件 <templateSolt></templateSolt> <templateSolt> <p>slot分发了内容< ...

  4. python 使用jinjia2 生成文件的空格处理

    例如: <div> {% if True %} yay {% endif %} </div> 生成文件为 <div> yay </div> 两种方法解决 ...

  5. python day 25--正则表达式

    一.字符组 1.[0-9]表示匹配0-9中的数字 2.[a-z]表示匹配a-z之间的字母 3.[A-Z]表示匹配大写的字母 4.[0-9a-zA-Z]匹配所有字母数字 二.元字符 1.\d 匹配任意数 ...

  6. 关于multi-index

    [转载请注明出处]http://www.cnblogs.com/mashiqi 2017/02/22 将$D^{\alpha}$和$\partial^{\alpha}$区别对待.$D^{\alpha} ...

  7. input[type='file']默认样式

    <input type="file" name="" id="" value="" /> 当input的ty ...

  8. 2017《JAVA技术》预备作业2-计科1502-19-何俏依

    Git学习笔记 1.安装git并验证安装成功 2.注册码云账号并配置git 3.创建ssh key并在码云上添加公钥,验证公钥添加成功 添加公钥的过程中,出现了一些问题,未找到文件,经过老师的指点,仔 ...

  9. python入门第二天

    啦啦啦啦啦!!!!我又来啦,几天该正式开始学习python语言啦,好高兴啊!!!今天学习的主要内容是变量和简单的数据类型!! 变量和简单的数据类型 大家回忆一下昨天的Hello Python Worl ...

  10. ios-改变图片的尺寸

    //改变图片的尺寸 -(UIImage*) OriginImage:(UIImage *)image scaleToSize:(CGSize)size { UIGraphicsBeginImageCo ...