Web 存储

HTML5提供了两种本地存储的新方法

localStorage

• 永久存储，除非手动删除
• 容量大小约20M
• 可以多个窗口共享

sessionStorage

• 当用户关闭浏览器窗口后，数据会被删除
• 容量大小约5M
• 再同一个窗口下数据可以共享（通过跳转也可以共享）

方法详解

• setItem(key,value) 设置存储内容

window.localStorage.setItem('username','huxiaosheng');
window.sessionStorage.setItem('username','huxiaosheng');

• getItem(key) 读取存储内容

window.localStorage.getItem('username');
window.sessionStorage.getItem('username');

• removeItem(key) 删除键值为key的存储内容clear()清空所有存储内容

window.localStorage.removeItem('username');
window.sessionStorage.removeItem('username');

• key(n) 以索引值来获取存储内容

window.localStorage.clear();
window.sessionStorage.clear();

特性

​ 这两种本地存储的方法只能存储字符串，那数据是对象的话怎么存储和读取呢。这里要用到ECMA5 的内置对象JSON

JSON.stringify(obj) //将JSON格式的数据转换成字符串

JSON.parse(string) //将字符串转换成JSON格式的数据

// 创建一个JSON数据
var obj = {
  'username' : 'feifei',
  'age' : 18
}

// 转换JSON数据为字符串
var myObj = JSON.stringify(obj);

console.log(typeof myObj)
//存数据
window.localStorage.setItem('feifeiObj',myObj);

// JSON.parse 将一条字符串的JSON数据转换成JSON
alert(JSON.parse(window.localStorage.getItem('feifeiObj')).username);

cookie的缺点

• http请求头会带着
• 大小4k
• 主Domain污染

主要区别：cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。

差异性：

相同点：都是存储数据，存储在web端，并且都是同源

不同点：

1. cookie 只有4K 小 并且每一次请求都会带上cookie 体验不好，浪费带宽

2. session和local直接存储在本地，请求不会携带，并且容量比cookie要大的

3. session 是临时会话，当窗口被关闭的时候就清除掉 ，而 local永久存在，cookie有过期时间

4. cookie 和local都可以支持多窗口共享，而session不支持多窗口共享 但是都支持a链接跳转的新窗口