无论你使用的是什么javascript框架或库，对于所有的web开发者来说，有一点是不变的，那就是浏览器，即javascript运行的地方。对所有的网络开发者来说，学习浏览器存储是必须的。
什么是浏览器存储？
浏览器和服务器之间进行交互。服务器为浏览器上运行的网页提供服务，而用户数据则从浏览器传给服务器。因此，服务器是我们要存储数据的主要地方，但我们也可以在浏览器上存储一些临时数据，与服务器的操作过程中不需要这些数据，比如认证细节，会话ID，用户偏好的数据。
三种类型的浏览器存储
注意：用户可以在应用程序的工具栏中访问这些存储，并进行操作。
如何通过浏览器发访问存储？
打开浏览器工具栏 -> 进入应用程序标签 -> 你会看到所有的存储选项。
LocalStorage SessionStorage
这些存储对象是简单的键值对。它们的有趣之处在于，数据可以在页面刷新（对于sessionStorage），甚至在浏览器完全重启（对于localStorage）的情况下继续存在。
它们的存储容量比cookie大得多，所以不在header中发给服务器。大多数浏览器有5MB（可以扩展）。
两个存储对象都提供了相同的方法和属性：
- setItem(key, value) - 存储键/值对。
- getItem(key) - 按键获取值。
- removeItem(key) - 删除键和它的值。
- clear() - 删除所有内容。
- key(index) - 获得指定位置的键。
- length - 存储项目的数量。
LocalStorage
localStorage的主要特点是：
- 在同一来源的所有标签和窗口之间共享。
- 数据不会过期。它在浏览器重启甚至操作系统重启后仍然存在。
SessionStorage
sessionStorage对象比localStorage使用的频率低得多。
属性和方法都是一样的，但局限性更大：
- sessionStorage只存在于当前的浏览器标签中。
- 同一页面的另一个标签将有一个不同的存储。
- 但它在同一标签页的iframe之间是共享的（假设它们来自同一来源）。
- 这些数据在页面刷新后仍然存在，但不包括关闭/打开标签。
例子
可以直接访问这两个存储对象。
// to add a key value pair
localStorage.setItem('test', 1);
sessionStorage.setItem('test', 1);
// to fetch the value stored in a particular key
console.log( localStorage.getItem('test') ); // 1
console.log( sessionStorage.getItem('test') ); // 1
如果你在浏览器中打开localStorage或sessionStorage，可以看到数据：
注意：键值都是字符串。
存储对象
// wrong way
localStorage.setItem('user',{name: "John"});
console(localStorage.user); // [object Object]
// corrent way
localStorage.setItem('user',JSON.stringify({name: "John"}));
let user = JSON.parse( localStorage.user );
console.log( user.name ); // John
学习更多关于localStorage和sessionStorage：
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage
Cookies
与localStorage一样，cookies也是具有键/值对的存储对象。但有些特别，因为它们被附加到HTTP请求头中。因此，如果服务器可能会使用这些cookie数据，就会很有用。Cookies大小的限制是4kb。
这对于服务器可能需要运行的用户偏好等数据来说是很好的。
例子
注意：你需要一个由服务器托管的应用程序来使用cookie存储，而普通的文件托管是无法工作的。
// To access this storage object you can:
console.log(document.cookie) // shows all cookie data
// Right now might be empty cause nothing is set
// Setting data
document.cookie = "user=John"; // does not overwrite just appends new pair
console.log(document.cookie) // shows all cookie data
const user = {name: max, age: 20}
document.cookie = "user=${user}";
学习更多关于Cookies：
https://developer.mozilla.org/en-US/docs/Tools/Storage_Inspector/Cookies
IndexedDB
这是三者中最复杂的浏览器存储。它就像一个浏览器数据库。它可以创建具有丰富查询能力的网络应用程序，无论网络是否可用，你的应用程序可以在线和离线工作。
因此，这对于需要持久保存真正复杂的数据的应用来说非常有用，例如游戏、日历、谷歌word文档等。
例子
- 打开一个数据库。
- 在数据库中创建一个对象存储。
- 启动一个事务，并发出请求，进行一些数据库操作，如增加或查询数据。
- 通过监听正确的DOM事件来等待操作的完成。
- 对结果进行处理（可以在请求对象上找到）。
const dbName = "CheckoutProductsStore";
//open a connection to an existing db or create new
// first parameter is the name of the db and second parameter is // the version of the db
// open method returns a request
var request = indexedDB.open(dbName, 2);
// request object has the result, whether the connection was successful or error
request.onerror = function(event) {
// Handle errors.
};
request.onsuccess = function(event) {
var db = event.target.result;
// Create an objectStore to hold information about our customers. We're
// going to use "id" as our key path because it's guaranteed to be
var objectStore = db.createObjectStore("products", { keyPath: "id" });
// Use transaction oncomplete to make sure the objectStore creation is
// finished before adding data into it.
objectStore.transaction.oncomplete = function(event) {
// Store values in the newly created objectStore.
var productsObjectStore = db.transaction("products", "readwrite").objectStore("products");
checkoutProductsData.forEach(function(product) {
productsObjectStore.add(customer);
});
};
};
学习更多关于IndexedDB：
https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB
总结
以上介绍了在浏览器中存储数据的方式，以及与之交互不同的API。你可以更深入地了解这些，并选择最适合你的。浏览器存储对于提供良好的用户体验和节约成本非常有用，但请记住，它总是可以被客户端访问和操作。因此，并不是服务器的替代品，但对于建立一个网络应用来说是很方便的。
原文标题：Introduction To Browser Storage and how to persist data in browser.
原文作者：Umang Goyal
原文地址：https://blog.knoldus.com/introduction-to-browser-storage-and-how-to-persist-data-in-browser/
