【学习HTML5】 网页存储Web Storage技术

Web Storage组成

Web Storage实际上由两部分组成：sessionStorage与localStorage 。

1. sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
2. localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
3. 储存的对象类型均为字符串类型。
4. sessionStorage 和 localStorage 的用法基本一致，引用类型的值要转换成JSON

Web Storage优势

1. 存储空间
   存储空间 更大：IE8下每个独立的存储空间为10M，其他浏览器实现略有不同，但都比Cookie要大很多。Cookie只允许每个网站在客户端存储4KB的数据，而在HTML5中，Web Storage的容量由浏览器绝对，一般为1MB~5MB。
2. 服务器
   存储内容不会发送到服务器：当设置了Cookie后，Cookie的内容会随着请求一并发送的服务器，这对于本地存储的数据是一种带宽浪费。而Web Storage中的数据则仅仅是存在本地，不会与服务器发生任何交互。
3. 接口
   更多丰富易用的接口：Web Storage提供了一套更为丰富的接口，使得数据操作更为简便。
4. 存储空间
   独立的存储空间：每个域（包括子域）有独立的存储空间，各个存储空间是完全独立的，因此不会造成数据混乱。

WebStorage与Cookie的不同

• WebStorage主要是用来在客户端存储数据，不一定要传输到服务端。Cookie则会在请求头中一起发送到服务端。
• WebStorage的大小不同的浏览器设置不一样，但是都远大于Cookie的4KB。
• WebStorage只能由客户端脚本访问，不能在服务端生成。

特性	localStorage	sessionStorage	cookie
生命周期	执行删除命令才会消失	仅在当前会话下有效，浏览器窗口或分页(tab)关闭就会消失	一般有服务器生成，可设置失效时间。如果在浏览器生成cookie，默认是关闭浏览器后失效
有效范围	同一网站的网页可以跨窗口和分页	仅对当前浏览器窗口或分页有效	cookie分为会话cookie和持久cookie。会话cookie是指在不设定它的生命周期时的状态，浏览器开启到关闭就是一次会话，当关闭浏览器时，会话cookie就会跟随浏览器而销毁。当关闭一个页面时，不影响会话cookie的销毁。持久cookie则是设定了生命周期。对于持久cookie，可以在同一个浏览器中传递数据，比如，你在打开一个淘宝页面登录后，你在点开一个商品页面，依然是登录状态，即便你关闭了浏览器，再次开启浏览器，依然会是登录状态。
存放数据大小	一般1MB~5MB	一般1MB~5MB	4KB
与服务端通信	仅在客户端（即浏览器）保存	仅在客户端（即浏览器）保存	每次都会携带在HTTP头上

WebStorage使用方法

1. 保存数据到本地 setItem()

//引用类型的值要转换成JSON
 const object1 = {
     name: 'lili',
     age: 20,
 };

 sessionStorage.setItem('key', object1);
 console.log(sessionStorage.getItem("key")); //[object Object]

 // sessionStorage.setItem('key', JSON.stringify(object1));
 localStorage.setItem('key', JSON.stringify(object1))
 console.log(localStorage.getItem("key"));  //{"name":"lili","age":20}

2. 从本地存储获取数据 getItem()

 //localStorage
 window.localStorage.setItem("name1","febby");
 window.localStorage.setItem("age1","8");
 
 const name1=window.localStorage.getItem("name");
 const age1=window.localStorage.getItem("age");
 console.log(name1);
 console.log(age1);

 //sessionStorage
 window.sessionStorage.setItem("name2","jack");
 window.sessionStorage.setItem("age2","12");

 const name2=window.sessionStorage.getItem("name2");
 const age2=window.sessionStorage.getItem("age2");
 console.log(name2);
 console.log(age2);

3. 本地存储中删除某个保存的数据 removeItem(）

 //localStorage
 window.localStorage.setItem("name1","febby");
 window.localStorage.setItem("age1","8");
 window.localStorage.removeItem("age1");

 const name1=window.localStorage.getItem("name1");
 const age1=window.localStorage.getItem("age1");

 console.log(name1);
 console.log(age1);

 //sessionStorage
 window.sessionStorage.setItem("name2","jack");
 window.sessionStorage.setItem("age2","12");
 window.sessionStorage.removeItem("age2");

 const name2=window.sessionStorage.getItem("name2");
 const age2=window.sessionStorage.getItem("age2");

 console.log(name2);
 console.log(age2);

4. 删除所有保存的数据 clear()

//localStorage
window.localStorage.setItem("name1","febby");
window.localStorage.setItem("age1","8");
window.localStorage.clear();

const name1=window.localStorage.getItem("name1");
const age1=window.localStorage.getItem("age1");

console.log(name1);
console.log(age1);

//sessionStorage
window.sessionStorage.setItem("name2","jack");
window.sessionStorage.setItem("age2","12");
window.sessionStorage.clear();

const name2=window.sessionStorage.getItem("name2");
const age2=window.sessionStorage.getItem("age2");

console.log(name2);
console.log(age2);

WebStorage有效范围

localStorage:同一网站的网页可以跨窗口和分页
sessionStorage:仅对当前浏览器窗口或分页有效
webStorage.html

//localStorage
 window.localStorage.setItem("name1","febby");
 window.localStorage.setItem("age1","8");
 // window.localStorage.clear();

 const name1=window.localStorage.getItem("name1");
 const age1=window.localStorage.getItem("age1");

 console.log(name1);
 console.log(age1);

 //sessionStorage
 window.sessionStorage.setItem("name2","jack");
 window.sessionStorage.setItem("age2","12");
 // window.sessionStorage.clear();

 const name2=window.sessionStorage.getItem("name2");
 const age2=window.sessionStorage.getItem("age2");

 console.log(name2);
 console.log(age2);

webStorageTest.html

//localStorage
const name1=window.localStorage.getItem("name1");
const age1=window.localStorage.getItem("age1");
console.log(name1);
console.log(age1);


//sessionStorage
const name2=window.sessionStorage.getItem("name2");
const age2=window.sessionStorage.getItem("age2");
console.log(name2);
console.log(age2);