网络技术问题

引导测验 - 第2组 - 问题7

在开发过程中经常会遇到各种网络技术问题，下面是第2组的第7个问题，希望对程序员们有所帮助。

问题描述

如何实现浏览器端的本地存储？

解决方案

在浏览器端，可以通过 HTML5 提供的本地存储方案——localStorage和sessionStorage 来实现本地存储。

localStorage

localStorage 是一种本地存储的方法，它可以在浏览器关闭后仍保留存储的数据，直到用户清除浏览器缓存。

使用 localStorage 很简单，只需要调用它的一个属性，即可存取数据：

// 存储数据
localStorage.setItem('key', 'value');

// 读取数据
var value = localStorage.getItem('key');

// 删除数据
localStorage.removeItem('key');

sessionStorage

sessionStorage 与 localStorage 类似，可以用于数据的存取，但是 sessionStorage 并不保持存储的数据。

在同一窗口或标签页内，sessionStorage 可以用于存储会话级别数据的时候使用，这些数据在同一会话期间共享（在同一窗口或标签页内）。

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

// 读取数据
var value = sessionStorage.getItem('key');

// 删除数据
sessionStorage.removeItem('key');

总结

利用 HTML5 提供的本地存储方法，可以很方便地存取数据。localStorage 保存的数据即使用户关闭了浏览器也不会丢失，而sessionStorage 保存的数据在同一会话期间内共享，在用户关闭浏览器后数据会被清除。