HTML5 Web存储

素颜马尾好姑娘i 2022-06-04 03:35 161阅读 0赞

# HTML5 Web存储 #

在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。数据以 键/值 对存在, web网页的数据只允许该网页访问使用。

客户端存储数据的两个对象为：

*  localStorage - 没有时间限制的数据存储
 *  sessionStorage - 针对一个 session 的数据存储

在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage:

if(typeof(Storage)!=="undefined")
    { 
    // 是的! 支持 localStorage sessionStorage 对象!
    // 一些代码.....
    } else { 
    // 抱歉! 不支持 web 存储。
    }

## localStorage对象 ##

localStorage 对象存储的数据没有时间限制。

localStorage的使用是遵循同源策略的，所以不同的网站之间是不能共用相同的localStorage。

localStorage只支持string类型的存储。

使用示例：

if(!window.localStorage){ 
    alert("浏览器支持localstorage");
    return false;
    }else{ 
    var storage=window.localStorage;
    //写入a字段
    storage["a"]=1;
    //写入b字段
    storage.a=1;
    //写入c字段
    storage.setItem("c",3);
    console.log(typeof storage["a"]);
    //第一种方法读取
    var a=storage.a;
    console.log(a);
    //第二种方法读取
    var b=storage["b"];
    console.log(b);
    //第三种方法读取
    var c=storage.getItem("c");
    console.log(c);
    }

不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：

*  保存数据：localStorage.setItem(key,value);
 *  读取数据：localStorage.getItem(key);
 *  删除单个数据：localStorage.removeItem(key);
 *  删除所有数据：localStorage.clear();
 *  得到某个索引的key：localStorage.key(index);

## sessionStorage 对象 ##

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

如何创建并访问一个 sessionStorage：

if (sessionStorage.clickcount){ 
    sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
    }
    else { 
    sessionStorage.clickcount=1;
    }
    document.getElementById("result").innerHTML="在这个会话中你已经点击了该按钮 " + sessionStorage.clickcount + " 次 ";

## 浏览器中的localStorage管理工具 ##

Chrome和Safari均有自己的本地localStorage查看和管理工具，Firefox拥有第三方插件可以管理localStorage，Chrome中位于开发人员工具中的Resources左侧的Databases（可能稍早一点的版本位于单独出来的工具栏，我的在Appliction里）。我们上面的localStorage在Chrome查看如下，利用这个工具可以修改或者删除相应项。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ZpZ2h0aW5nX05vMQ_size_16_color_FFFFFF_t_70]  
Safari中需要先在“偏好设置”、“高级”中将“在菜单中显示开发选项”勾选。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ZpZ2h0aW5nX05vMQ_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ZpZ2h0aW5nX05vMQ_size_16_color_FFFFFF_t_70]: /images/20220604/6c9a1dbaddf6452c892b0d7277dd19c4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ZpZ2h0aW5nX05vMQ_size_16_color_FFFFFF_t_70 1]: /images/20220604/1395ef528ae84ff09fb55e695f468338.png