第一部分: 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. leetcode 翻转二叉树

    翻转二叉树的步骤: 1.翻转根节点的左子树(递归调用当前函数) 2.翻转根节点的右子树(递归调用当前函数) 3.交换根节点的左子节点与右子节点 class Solution{ public: void ...

  2. vue-router进阶-2-路由原信息

    //meta字段,一个路由匹配到的所有路由记录会暴露为 $route 对象(还有在导航守卫中的路有对象)的 $route.matched 数组. const router = new VueRoute ...

  3. 定义一个Collection接口类型的变量,引用一个Set集合的实现类,实现添加单个元素, 添加另一个集合,删除元素,判断集合中是否包含一个元素, 判断是否为空,清除集合, 返回集合里元素的个数等常用操作。

    package com.lanxi.demo2; import java.util.HashSet; import java.util.Iterator; import java.util.Set; ...

  4. Python基础01_介绍_HelloWorld

    首先,当然是python的版本了,老师讲课学习都是以python3为主, 我的centos中还是python2.6.6 然后参照老师的教程升级到了2.7.14 谢谢! 平时主要练习3的,有时间的情况下 ...

  5. Linux 创建虚拟机,配置网卡,桥接,连接XShell

    一.新建虚拟机 1.“root”    输入密码: 2.看虚拟机的IP地址 “ifconfig” 二.配置网卡 1.更改设置(打开vim编辑) “vim /etc/sysconfig/network- ...

  6. 获取Ueditor里面的图片列表,地址绝对化

    /**     * 内容中图片地址转成绝对地址     * @param $content     * @return mixed     */    private function imgUrl( ...

  7. VS Code + NWJS(Node-Webkit)0.14.7 + SQLite3 + Angular6 构建跨平台桌面应用

    一.项目需求 最近公司有终端桌面系统需求,需要支持本地离线运行(本地数据为主,云端数据同步),同时支持Window XP,最好跨平台.要求安装配置简单(一次性打包安装),安装包要小,安装时间短,可离线 ...

  8. jsp弹窗并跳转

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletExcepti ...

  9. alpha冲刺(2/10)

    前言 队名:旅法师 作业链接 队长博客 燃尽图 会议 会议照片 会议内容 陈晓彬(组长) 今日进展: 召开会议 安排任务 博客撰写 构建之法的阅读 问题困扰: 分配任务,还是不熟练,对后台不熟悉,不知 ...

  10. ViewpagerHandler

    import android.os.AsyncTask; import android.os.Handler; import android.os.Message; import android.su ...