HTML5的本地存储

最新推荐文章于 2021-09-22 07:00:51 发布

原创最新推荐文章于 2021-09-22 07:00:51 发布 · 389 阅读

2 ·

CC 4.0 BY-SA版权

html5 专栏收录该内容

4 篇文章

订阅专栏

HTML5的本地存储分为永久性的本地存储和会话性的本地存储。

会话性本地存储sessionStorage

存储在sessionStorage中的数据首先是Key-Value形式的，另外就是它跟浏览器当前会话相关，当会话结束后，数据会自动清除，跟未设置过期时间的Cookie类似。

sessionStorage对本地存储的相关操作：

setItem(key,value)：添加本地存储数据，键值对形式。
getItem(key):通过key获取相应的Value。
removeItem(key):通过key删除本地数据。
clear():清空数据。

//      sessionStorage:临时性本地存储
//      1.临时  页面关闭 存储消失
//      2.同域名下本页面能用 其他页面不可见
        //形式：名值对

        //存储数据
        set.onclick=function()
        {
            sessionStorage.setItem("name","xiaoming");
            sessionStorage.setItem("age","18");
            sessionStorage.setItem("sex","男");
        }
        //获取数据
        get.onclick=function()
        {
            sessionStorage.getItem("name");
        }
        //移除数据
        remove.onclick=function()
        {
            sessionStorage.removeItem("name");//逐条删
            sessionStorage.clear();//删除全部
        }
        //获取key名
        key.onclick=function()
        {
            alert(sessionStorage.key(0));
        }
        //获取本地存储length
        length.onclick=function()
        {
            alert(sessionStorage.length);
        }

永久性本地存储localStorage

在最新的JS的API中增加了localStorage对象，以便于用户存储永久存储的Web端的数据。而且数据不会随着Http请求发送到后台服务器，而且存储数据的大小几乎不用考虑。

localStorage对本地存储的相关操作：

setItem(key,value)：添加本地存储数据，键值对形式。
getItem(key):通过key获取相应的Value。
removeItem(key):通过key删除本地数据。

clear():清空数据。

//      localStorage:临时性本地存储
//      1.临时  页面关闭 存储消失
//      2.同域名下本页面能用 其他页面不可见
    //形式：名值对

    //存储数据
    set.onclick=function()
    {
        localStorage.setItem("name","xiaoming");
        localStorage.setItem("age","18");
        localStorage.setItem("sex","男");
    }
    //获取数据
    get.onclick=function()
    {
        localStorage.getItem("name");
    }
    //移除数据
    remove.onclick=function()
    {
        localStorage.removeItem("name");//逐条删
        localStorage.clear();//删除全部
    }
    //获取key名
    key.onclick=function()
    {
        alert(localStorage.key(0));
    }
    //获取本地存储length
    length.onclick=function()
    {
        alert(localStorage.length);
    }