本地存储

本地存储：Cookie、localStorage、sessionStorage

项目	Cookie	localStorage	sessionStorage
容量	<4KB （URL的大小决定了Cookie不会太大）	<20MB	<5MB
传递方式	数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。	不会自动把数据发给服务器，仅在本地保存。	不会自动把数据发给服务器，仅在本地保存。
有效期	只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。	始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据。	仅在当前浏览器窗口关闭前有效。
作用域	在所有同源窗口中都是共享的。	在所有同源窗口中都是共享的。	不在不同的浏览器窗口中共享，即使是同一个页面。

Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。
Web Storage 的 api 接口使用更方便。

例;

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的值

 

案例1、记住用户名

- 题目描述

把课上的记住用户名案例写一遍

- 训练目标

能够使用本地存储

- 训练提示

  1. 把数据存起来，用到本地存储

  2. 关闭页面，也可以显示用户名，

  3. 打开页面，先判断是否有这个用户名，如果有，就在表单里面显示用户名，并且勾选复选框

  4. 当复选框发生改变的时候change事件

  5. 如果勾选，就存储，否则就移除