cookie是个基础的东西。是服务器发送到客户端，存储在客户端的一小段数据。可以存储一些配置信息，客户标识信息等。
用户下次访问这个网站时，会把上次网站发来的cookie一同发送回去。
cookie保存在客户端，服务器能够知道其中的信息。
session保存在服务器，客户端不知道其中的信息；

一、、h5之前，web本地存储都是由cookie完成，缺点：不适合大量数据存储2
与服务器的请求，速度慢，效率低。

二、h5提供了两种在客户端存储数据的新方法：
1、localStorage:无时间限制，除非手工删除。
2、sessionStorage:会话存储，浏览器关闭就销毁了。

localstorage是window的一个属性，因此，通常都是写window.localStorage，

存储数据的方法就是直接给window.localStorage添加一个属性，例如：

window.localStorage.a 或者 window.localStorage["a"]。它的读取、写、删除

操作方法很简单，是以键值对的方式存在的，如下：

localStorage.a = 3;//设置a为"3"
localStorage["a"] = "sfsf";//设置a为"sfsf"，覆盖上面的值
localStorage.setItem("b","isaac");//设置b为"isaac"
var a1 = localStorage["a"];//获取a的值
var a2 = localStorage.a;//获取a的值
var b = localStorage.getItem("b");//获取b的值
localStorage.removeItem("c");//清除c的值
localStorage.clear(); // 清除了所有

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。
但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生（来自@otakustay 的纠正）

案例1

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>.html</title>
<style>
</style>
<script src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
localStorage.setItem("aa",$("#text").val());
});

$("#btn2").click(function(){
$("#msg").html(localStorage.getItem("aa"));
});

});


</script>
</head>
<body>
<div id="msg" style="margin: 10px 0; border: 1px solid black; padding: 10px; width: 300px;
height: 100px;">
</div>
<input type="text" id="text" />
<button id="btn1" >
保存数据</button>
<button id="btn2">
读取数据</button>
</body>
</html>

案例2

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
textarea {
width: 500px;
height: 200px;
}
</style>
</head>
<body>
<div>
<h2>简单的web存储留言板</h2>
<textarea id="t1"></textarea>
<br />
<input type="button" class="button" onclick="addInfo()" value="留言" />
<input type="button" class="button" onclick="cleanInfo()" value="清除留言" />
<br />
<hr />
<label id="shows"></label>
<textarea id="show" readonly="readonly"></textarea>
</div>
<script type="text/javascript">
//使用HTML5 Web存储的localStorage方式进行编写一个Web页面。
//功能是一个简易的Web留言板。留言板信息可以永久保存。并能清楚留言板内容。参考页面如下图：

function upInfo() {
var info = window.document.getElementById("t1");
var lStorage = window.localStorage;
var show = window.document.getElementById("show");
if (lStorage.myBoard) {
show.value = window.localStorage.myBoard;
}
else {
info = "还没有留言";
show.value = "还没有留言";
}
}

function addInfo() {
var info = window.document.getElementById("t1");
var lStorage = window.localStorage;
if (lStorage.myBoard) {
var date = new Date();
lStorage.myBoard += t1.value + "\n发表时间：" + date.toLocaleString() + "\n";
}
else {
var date = new Date();
lStorage.myBoard = t1.value + "\n发表时间：" + date.toLocaleString() + "\n";
}

upInfo();
}
function cleanInfo() {
window.localStorage.removeItem("myBoard");
upInfo();
}
upInfo();
</script>

</body>
</html>

本地存储 localStorage/sessionStorage/cookie的更多相关文章

  1. 本地存储localStorage sessionStorage 以及 session 和cookie的对比和使用

    cookie和session都是用来跟踪浏览器用户身份的会话方式. 1.验证当前服务中继续请求数据时,哪些缓存数据会随着发往服务器? 只有cookie中设置的缓存数据会发送到服务器端 2. 强调几点: ...

  2. 移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题

    移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题 开发H5 webapp时经常需要使用本地存储,如localStorage和sessionStor ...

  3. 关于HTML5本地缓存技术LocalStorage 本地存储 和 SessionStorage

    如果你想在用户访问的时候记录或者记住他们的行为,你会想到的是什么,cookie 和session.但今天告诉你还有两种或者说是1种吧 那就是html5的 LocalStorage 本地存储和 Sess ...

  4. html5的本地存储localStorage和sessionStorage

    html5的本地存储localStorage和sessionStorage html5中新增的比较重要的一个功能就是web storage来实现客户端本地存储数据,之前存储数据都是用cookie来实现 ...

  5. 【转】本地存储-localStroage/sessionStorage存储

    原文地址:[js学习笔记-103]----本地存储-localStroage/sessionStorage存储 客户端存储 l  WEB存储 web存储最初作为html5的一部分被定义成API形式,但 ...

  6. localStorage sessionStorage cookie indexedDB

    目录: localStorage sessionStorage cookie indexedDB localStorage localStorage存储的数据能在跨浏览器会话保留 数据可以长期保留,关 ...

  7. 本地存储localStorage以及它的封装接口store.js的使用

    本地存储localStorage以及它的封装接口store.js的使用 sublime-text chrome javascript readyGo 2016年11月20日发布   0 推荐 9 收藏 ...

  8. 本地存储 localStorage

    本地存储localStorage 概念:window对象下面的属性,html5新增的,将5M大小的数据存储本地的浏览器上面. 浏览器支持存储5M大小 本地存储localStorage特点 本地存储属于 ...

  9. JS操作cookie以及本地存储（sessionStorage 和 localStorage ）

    JS操作cookie cookie的操作用两种方式 1.substring //创建cookie function setCookie(name,value,expires,path,domain,s ...

随机推荐

  1. ubuntu12.04下安卓编译环境搭建总结

    前言:      因为工作需要,经常要编译安卓下的动态库,公司有已经搭建好环境的服务器,但是第一自己想自己搭建一下了解一个整个过程,另外,公司的服务器也经常出现问 题,导致编译不了,所以就想自己搭建环 ...

  2. S3c6410 平台 Android系统的Wi-Fi调试记录

    硬件平台:S3c6410 操作系统:Android 网卡芯片:GH381(SDIO接口 sdio8688) 1.SDIO驱动 因为是SDIO接口,所以请先保证mmc驱动(代码在“kernel\driv ...

  3. java中几种常见字符集与乱码介绍

    1.  ASCII和Ansi编码 字符内码(charcter code)指的是用来代表字符的内码 .读者在输入和存储文档时都要使用内码,内码分为  单字节内码 -- Single-Byte chara ...

  4. combobox中动态加入几个checkbox，实现下拉框多选

    combobox中动态加入几个checkbox,实现下拉框多选,将一个checkbox选中时其内容就会在combobox中显示出来,将另一个checkbox选中时其内容会跟在第一个checkbox的内 ...

  5. Oracle连接字符串C#

    Password=密码;User ID=ID;Data Source=(DESCRIPTION = (ADDRESS_LIST = (ADDRESS = (PROTOCOL = TCP)(HOST = ...

  6. C#中求数组的子数组之和的最大值

    <编程之美>183页,问题2.14——求子数组的字数组之和的最大值.(整数数组) 我开始以为可以从数组中随意抽调元素组成子数组,于是就有了一种想法,把最大的元素抽出来,判断是大于0还是小于 ...

  7. 华东交通大学2016年ACM“双基”程序设计竞赛 1005

    Problem Description 最近侯ry感觉自己在数学方面的造诣不忍直视:他发现他的学习速率呈一个指数函数递增,疯狂的陷入学习的泥潭,无法自拔:他的队友发现了他的学习速率y=e^(b*lna ...

  8. Linux下mysql主从配置

    mysql服务器的主从配置,这样可以实现读写分离,也可以在主库挂掉后从备用库中恢复需要两台机器,安装mysql,两台机器要在相通的局域网内主机A: 192.168.1.100从机B:192.168.1 ...

  9. 在Spring4中使用通用Mapper

    在Spring4中使用通用Mapper http://my.oschina.net/flags/blog/355281#OSC_h2_2 目录[-] 在Spring4中使用通用Mapper 一.在Sp ...

  10. Spring.Net 技术简介 IOC and DI

    一 简单介绍            IOC 控制转移,就是将创建放到容器里,从而达到接耦合的目的,DI是 在容器创建对象的时候,DI读取配置文件,然后给对象赋默认值,两者一般结合使用,实现注入.   ...