一、客户端存储

• web应用允许使用浏览器提供的API将数据存储在客户端电脑上

• 客户端存储遵守“同源策略”，不同的站点页面之间不能相互读取彼此的数据

• 在同一个站点的不同页面之间，存储的数据是共享的

• 数据的存储有效期可以是临时的，比如关闭浏览器数据就销毁； 也可以是永久的，可以在客户端电脑上存储任意时间

二、Cookie

1）创建cookie：

 function setCookie(name, value, exdays) {
            var d = new Date();
            d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
            var expires = "expires=" + d.toGMTString();
            document.cookie = name + "=" + value + "; " + expires
        }
 setCookie("haha",123,30)

2）获取cookie：

 function getCookie(name) {
            var name = name + "=";
            var ca = document.cookie.split(';');
            for (var i = 0; i < ca.length; i++) {
                var c = ca[i].trim();
                if (c.indexOf(name) == 0) { return c.substring(name.length, c.length); }
            }
            return "";
        }
   //打印所有cookie
   console.log(document.cookie)

3）判断是否有某个cookie：

 function checkCookie() {
            var user = getCookie("username");
            if (user != "") {
                alert("欢迎 " + user + " 再次访问");
            }
            else {
                user = prompt("请输入你的名字:", "");
                if (user != "" && user != null) {
                    setCookie("username", user, 30);
                }
            }
        }

4）实例： 

<input type="text" id="name">
<input type="text" id="pwd">
<button onclick="fn()">保存button>	
<script>
	function fn(){
		var name = document.querySelector("#name");
		var pwd = document.querySelector("#pwd");
		var exday = new Date(new Date().getTime()+1000*60*60*24*30) 
		// 分号前面是用户缓存的内容，后面是对这些内容的一些设置（有效期等）
		document.cookie = `name=${name.value}&pwd=${pwd.value};expires=${exday}`;
	}
	window.onload=function(){
		// 获取cookie的值
		console.log(document.cookie);
	}	
script>
		

 5）拓展：

cookie属性：name、value、expires、domain、path、secure、max-age、HttpOnly。

name：

• name 属性是必需的，它是一个键值对，用于指定Cookie的键

value：

• value 属性是必需的，它是一个键值对，用于指定Cookie的值

expires：

• expires 属性用于指定Cookie过期时间
• 它采用UTC或GMT格式  通过new Date().toUTCString()或new Date().toGMTString()获取
• 若不设置该属性或设为null，Cookie只在当前会话有效，一旦关闭浏览器窗口，当前Session结束，该Cookie就会被删除
• 浏览器根据本地时间，决定Cookie是否过期，由于本地时间是不精确的，所以没有办法保证Cookie一定会在服务器指定的时间过期
• 当设置的失效时间大于等于1天时：可以在 expires 属性后面直接输入XX天数

Cookies.set('name', 'value', {
   expires: 7,
})

• 当设置的失效时间少于一天时：需要在当前的时间上加上失效时间。

//下面是设置cookie的失效时间为15分钟。
var m= new Date().getTime()
var expiresTime = new Date(m + 60 * 1000 * 15)
Cookies.set('name', 'value', {
  expires: expiresTime,
 })

• 当expires设置一个过去的时间点，那么这个cookie 会被立即删掉（失效）

domain：

• domain属性指定Cookie所在的域名  如baidu.com  若未指定则默认为设定该Cookie的域名
• 所指定的域名必须是当前发送Cookie的域名的一部分，如当前访问的域名是example.com，就不能将其设为google.com
• 只有访问的域名匹配domain属性，Cookie才会发送到服务器

path：

• path属性用来指定路径且必须是绝对路径  若未指定则默认为请求该Cookie的网页路径
• 只有path属性匹配向服务器发送的路径，Cookie才会发送
• 这里的匹配不是绝对匹配，而是从根路径开始，只要path属性匹配发送路径的一部分，就可以发送
• 如path属性等于/blog，则发送路径是/blog或者/blogroll，Cookie都会发送
• path属性生效的前提是domain属性匹配

secure：

• secure属性用来指定Cookie只能在加密协议HTTPS下发送到服务器
• 该属性只是一个开关，不需要指定值  如果通信是HTTPS协议该开关会自动打开

max-age：

• max-age属性用来指定Cookie有效期
• 正常情况下，max-age的优先级高于expires，但是二者有一些细微差别

HttpOnly：

• HttpOnly属性用于设置该Cookie不能被JavaScript读取（即document.cookie不会返回该Cookie的值）
• 只用于向服务器发送 主要是为了防止XSS攻击盗取Cookie

三、localStorage和sessionStorage的API

• setItem()：将对应的名字和值传递进去，可以实现数据存储
• getItem()：将名字传递进去，可以获取对应的值
• removeItem()：将名字传递进去，可以删除对应的值
• clear()：删除所有的缓存值，不需要参数
• length：属性，获取键值对总数
• key()：传入位置数，获取存储的值的名字

注：localStorage和sessionStorage是window的两个属性 他们代表同一个Storage对象

四、localStorage

• 永久性保存
• setItem(string key, value)：保存 ​
• getItem(string key)：获取 ​
• clear()：清空 ​
• removeItem(sring key)：根据键得到值

  实例：

<input type="text" id="box1">
<button onclick="localStorage1()">LocalStorage存数据button>
<button onclick="getlocalStorage1()">LocalStorage取数据button>
<button onclick="clear1()">LocalStorage清除数据button>
<script>
    function localStorage1(){
		window.localStorage.setItem("username","haha")
		window.localStorage.setItem("touxiang","一张图片的链接")
	}
	function getlocalStorage1(){
		var re=window.localStorage.getItem("username")
		console.log(re)			
	}
	function clear1(){
		window.localStorage.clear()
	}
script>

五、sessionStorage

• 关闭浏览器数据就自动全部删除
• sessionStorage.length：​返回一个整数  表示存储在sessionStorage对象中的数据项(键值对)数量
• sessionStorage.key(int index)：返回当前sessionStorage对象的第index序号的key名称  若没有就返null
• sessionStorage.getItem(string key) ：返回键名(key)对应的值(value)   若没有就返回null
• sessionStorage.setItem(string key, string value) ：接收一个键名(key)和值(value)作为参数，将键值对添加到存储中；若键名存在，则更新其对应的值
• sessionStorage.removeItem(string key) ：将指定的键名(key)从sessionStorage对象中移除
• sessionStorage.clear() ：清除 sessionStorage 对象所有的项

   实例(与localStorage相似)：

<input type="text" id="box1">
<button onclick="sessionStorage()">sessionStorage存数据button>
<button onclick="sessionStorage1()">sessionStorage取数据button>
<button onclick="clear1()">sessionStorage清除数据button>
<script>
	function sessionStorage1() {
		window.sessionStorage.setItem("username", "haha")
		window.sessionStorage.setItem("touxiang", "一张图片的链接")
	}
    function getsessionStorage1() {
		var re = window.sessionStorage.getItem("username")
		console.log(re)
	}
 
	function clear1() {
		window.sessionStorage.clear()
	}
script>

六、localStorage和sessionStorage的区别

（1）有效时间：

• localStorage：存储的数据是永久的，用户可以主动清除这些缓存数据的： 如清除历史记录
• sessionStorage：存储的数据在窗口或标签关闭时数据丢失；在一个标签前进后退时数据不会丢失

（2）作用域：

• localStorage的作用域限制在文档源： 文档源由协议、域名、端口三者来确定
• localStorage同源的文档之间可以相互访问和修改相同名称的数据
• localStorage受浏览器厂商的限制，chrome存储的数据360浏览器不可访问   会得到‘Invalid Date’
• sessionStorage在localStorage的同源策略基础上，有更严格的限制：
• 他还被限制在窗口中，意思是同一个窗口或标签页的不同页面之间可以共享sessionStorage
• 但是不同的窗口或标签页之间不能共享sessionStorage，即便他们是同一个页面地址
• 窗口是指顶级窗口，如果是多个iframe，他们之间共享sessionStorage

七、localStorage、sessionStorage、Cookie三者的区别

（1）存储大小：

• cookie数据大小不能超过4k 
• sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大

（2）有效时间：

• localStorage： 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据
• sessionStorage： 数据在当前浏览器窗口关闭后自动删除
• cookie： 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

（3）数据与服务器之间的交互方式：

• cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
• sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存

（4）作用域：

• localStorage的作用域限制在文档源的
• localStorage同源的文档之间可以相互访问和修改相同名称的数据
• localStorage受浏览器厂商的限制：chrome下存储的数据，360浏览器下不可访问
• sessionStorage在localStorage的同源策略基础之上，还有更严格的限制：被限制在窗口中
• 即同一个窗口或标签页的不同页面之间可以共享sessionStorage，但不同的窗口或标签页之间不能共享sessionStorage，即便他们是同一个页面地址
• 这里的窗口是顶级窗口，如果里面有多个iframe，他们之间共享sessionStorage