前端本地存储

[unproductive-wanyicheng]

前端本地存储

1. sessionStorage

sessionStorage 属性允许你访问一个，对应当前源的 session Storage 对象。它与 localStorage 相似，不同之处在于 localStorage 里面存储的数据没有过期时间设置，而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。

页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。
在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文，这点和 session cookies 的运行方式不同。
打开多个相同的URL的Tabs页面，会创建各自的sessionStorage。
关闭对应浏览器窗口（Window）/ tab，会清除对应的sessionStorage。

// 保存数据到 sessionStorage
sessionStorage.setItem('key', 'value');

// 从 sessionStorage 获取数据
let data = sessionStorage.getItem('key');

// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem('key');

// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();

小结：
0. sessionStorage以 协议+域名+端口号作为key标识，不被同域名标签页共享

1. 再次打开同个域名的新页签的时候，自动复制一份该页签已有的sessionStorage

2. 刷新当前页面保持当前的sessionStorage

3. 关闭页面后会清除这个sessionStorage

4. 所有数据操作都是同步的

5. 存储的键值对都必须是字符串

6. 存储大小由浏览器具体实现决定，网上传是5M左右

7. localStorage

基本操作同sessionStorage几乎没区别，

function setStyles() {
  var currentColor = localStorage.getItem('bgcolor');
  var currentFont = localStorage.getItem('font');
  var currentImage = localStorage.getItem('image');

  document.getElementById('bgcolor').value = currentColor;
  document.getElementById('font').value = currentFont;
  document.getElementById('image').value = currentImage;

  htmlElem.style.backgroundColor = '#' + currentColor;
  pElem.style.fontFamily = currentFont;
  imgElem.setAttribute('src', currentImage);
}

function populateStorage() {
  localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
  localStorage.setItem('font', document.getElementById('font').value);
  localStorage.setItem('image', document.getElementById('image').value);

  setStyles();
}

localStorage.removeItem('key');
localStorage.clear() 

window.addEventListener('storage', function(e) {
  document.querySelector('.my-key').textContent = e.key;
  document.querySelector('.my-old').textContent = e.oldValue;
  document.querySelector('.my-new').textContent = e.newValue;
  document.querySelector('.my-url').textContent = e.url;
  document.querySelector('.my-storage').textContent = JSON.stringify(e.storageArea);
});

小结：
0. localStorage 以 协议+域名+端口号作为key标识，被同域名标签页共享

1. 再次打开同个域名的新页签的时候，共享该域名已存在的localStorage
2. 刷新当前页面保持当前的sessionStorage
3. 关闭页面后不会清除这个sessionStorage
4. 所有数据操作都是同步的
5. 存储的键值对都必须是字符串
6. 存储大小由浏览器具体实现决定，网上传是5M左右
7. 可以在其他页签监听storage事件，捕获数据改变事件

可以看到，它们2个都可以作为前端本地存储的方式。
区别主要在于是否持久，是否跨页签。

缺点主要在于：

1. 所有数据操作都是同步的
2. 存储空间有限
3. 存储的值类型只能是字符串

所以还有一种存储方案可以了解一下：IndexDB
它被设计成完全异步的接口，格式、大小不受限制。
可以作为前端本地存储数据量大的情况处理。
MDN链接中的文档写的相当清楚和详细了，然后还给了一个小例子作为实战，可以说是十分贴心了。
之前自己写过一个本地模拟的微信应用，也用了IndexDB来存储聊天记录，效果还可以哈哈。
这次就不写IndexDB的实战代码了，等有机会写一些项目的时候有需要的场景的话就用它来存储数据吧。

参考资料：

1. https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API
2. https://developer.mozilla.org/zh-CN/docs/Web/API/Window/sessionStorage
3. https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API/Using_IndexedDB