在HTML5的帮助下，网站可以在“本地”或“会话存储”的浏览器中存储高达10MB大小的数据。

对于动态网站，数据将是巨大的，并存储在服务器端的Memcache或页面缓存，会话或Cookie中。但是，由于Cookie和会话数量有限，并将所有数据附加到一个字符串中，因此很难将数据存储在Cookie和会话中。 

此外，这种方法将延迟页面加载时间，并且需要一些CPU进程来处理它。到目前为止，网站正在将会议数据存储在SESSIONS或COOKIES或来自CDN的静态文件中。随着HTML5的发布，我们有很多新的属性，属性，异步，本地，会话存储和类似的功能。

通过使用本地/会话存储，我们可以在浏览器的内存中存储最多10MB的数据。几乎所有的现代浏览器都支持本地/会话存储。本地存储和会话存储之间的区别在于关闭浏览器/选项卡，会话存储将被删除，而本地存储数据将保留在浏览器中，直到用户物理删除它或删除相同的使用removeItem选项。

<table> <caption> <abbr>HTML5</abbr> Storage support </caption> <thead> <tr> <th title="Internet Explorer">IE</th> <th title="Mozilla Firefox">Firefox</th> <th title="Apple Safari">Safari</th> <th title="Google Chrome">Chrome</th> <th>Opera</th> <th>iPhone</th> <th>Android</th> </tr> </thead> <tbody> <tr><td>8.0+</td><td>3.5+</td><td>4.0+</td><td>4.0+</td><td>10.5+</td><td>2.0+</td><td>2.0+ </td></tr></tbody></table>

本地存储具有从客户端浏览器设置，获取和删除本地/会话存储数据的三种奇妙的方法。

如何将数据设置为本地存储

要将数据设置到浏览器中，HTML5提供了localStorage.setItem（）方法。

• <script>
• if(window.localStorage){
• try{
• window.localStorage.setItem(key, data );
• }catch(e){
• return false;
• }
• }
• </scirpt>

要简要解释，在上面的例子中，我们检查浏览器是否支持本地存储。如果您的浏览器支持，那么我们将在window.localStorage.setItem（key，data）的帮助下设置数据。

这里，第一个参数是数据的关键，数据是要存储在浏览器中的实际数据。

例：

• <script>
• var key = 'list-of-counties'
• var data = '[{"1":"US"},{"2":"UK"},{"3":"India"}]';
• if(window.localStorage){
• try{
• window.localStorage.setItem(key, data );
• }catch(e){
• return false;
• }
• }
• </scirpt>

在上面的例子中，我们在浏览器中存储国家列表。国家列表是一个json数据，对于网站中的所有页面都是常见的。一旦存储数据，我们可以通过查看浏览器来验证浏览器中是否设置了数据。

例如，转到浏览器的控制台（ctrl + f12） - >资源下 - >本地存储 - >您的站点名称 - >查看您的密钥。

如果您发现这些数据意味着您的浏览器支持本地存储。否则请尝试使用最新版本或Chrome，Firefox或IE8 +等现代浏览器

除了对象之外，您可以将任何数据存储在本地存储中。

从本地存储读取/访问数据

一旦设置了数据，现在我们需要从浏览器的内存读取它。对于读取数据，HTML5提供localStorage.getItem（key）方法。以下示例显示如何从本地存储中检索数据。

• <script>
• if(window.localStorage){
• try{
• var data = window.localStorage.getItem(key);
• return data;
• }catch(e){
• return false;
• }
• }
• </scirpt>

window.localStorage.getItem（key），key是我们设置要存储的数据的实际键。

从本地存储中删除或删除数据

从浏览器设置和获取数据后，如果您觉得数据有用，并决定删除，则可以使用localStorage.removeItem（key）删除相同的数据，

• <script>
• if(window.localStorage){
• try{
• window.localStorage.removeItem(key);
• }catch(e){
• return false;
• }
• }
• </scirpt>

本地存储和会话存储的详细示例

假设您要设置整个网站中常见的数据的国家/地区列表，您可以将其设置为json数据，并将其设置为浏览器的本地存储。

• <script>
• var key = 'country-data';
• var data = '[{"1":"US"},{"2":"UK"},{"3":"India"}]';
• setLocalStorageData(key,data);
• var storedData = '';
• storedData = getLocalStorageData(key);
• removeLocalStorageData(key);
• function setLocalStorageData(key,data){
• if(window.localStorage){
• window.localStorage.setItem(key, data);
• return true;
• }
• return false;
• }
• function getLocalStorageData(key){
• return window.localStorage.getItem(key)
• }
• function removeLocalStorageData(key){
• window.localStorage.removeItem(key)
• }
• </scirpt>

注意：将数据存储在本地/会话存储中是安全的，除非它不是机密数据。