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

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

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

四种常用方法

CookiesLocal StorageSession StorageIndexedDB

---

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（相当于数据库中的表）

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