客户端（浏览器端）数据存储

客户端（浏览器端）数据存储

http://web.jobbole.com/90689/

四种常用方法

• Cookies
• Local Storage
• Session Storage
• IndexedDB
  

  ---

Cookies

在文档内存储字符串

存储通用的数据，如用户的首选项设置

管理用户会话，追踪用户信息

// Create
document.cookie = "user_name=Ire Aderinokun";  
document.cookie = "user_age=25;max-age=31536000;secure";

// Read (All)
console.log( document.cookie );

// Update
document.cookie = "user_age=24;max-age=31536000;secure"; 

// Delete
document.cookie = "user_name=Ire Aderinokun;expires=Thu, 01 Jan 1970 00:00:01 GMT";

优点：当 cookie 快要自动过期时，我们可以重新设置（update）而不是删除

缺点：增加了文档传输的负载；只能存储少量的数据；只能存储字符串；有潜在的安全问题

---

Local Storage

在浏览器端存储键值对数据

可以存储字符串化的json数据

// Create
const user = { name: 'Ire Aderinokun', age: 25 }  
localStorage.setItem('user', JSON.stringify(user));

// Read (Single)
console.log( JSON.parse(localStorage.getItem('user')) ) 

// Update
const updatedUser = { name: 'Ire Aderinokun', age: 24 }  
localStorage.setItem('user', JSON.stringify(updatedUser));

// Delete
localStorage.removeItem('user');

缺点：只能存储字符串数据(直接存储复合数据类型如数组/对象等，都会转化成字符串，会存在存取数据不一致的情况)：

为避免存取数据不一致的情形，存储复合数据类型时进行序列化，读取时进行反序列化

localStorage.setItem('test4', JSON.stringify({a:1,b:2}));
console.log(typeof localStorage.getItem('test4'))  //"string"
console.log(JSON.parse(localStorage.getItem('test4')))  //{a:1,b:2}

---

Session Storage

Session Storage 是 Web Storage API 的另一种类型。和 Local Storage 非常类似，区别是 Session Storage 只存储当前会话页(tab页)的数据，一旦用户关闭当前页或者浏览器，数据就自动被清除掉了。

// Create
const user = { name: 'Ire Aderinokun', age: 25 }  
sessionStorage.setItem('user', JSON.stringify(user));

// Read (Single)
console.log( JSON.parse(sessionStorage.getItem('user')) ) 

// Update
const updatedUser = { name: 'Ire Aderinokun', age: 24 }  
sessionStorage.setItem('user', JSON.stringify(updatedUser));

// Delete
sessionStorage.removeItem('user');

---

IndexedDB

基于 JavaScript、面向对象的和数据库的，能非常容易地存储数据和检索已经建立关键字索引的数据

首先要打开数据库，创建需要的stores（相当于数据库中的表）

再进行创建、更新、检索、删除数据等操作