sessionStorage会话存储&localStorage本地存储

    科技2025-10-08  2

    什么是 HTML5 Web 存储?

    使用HTML5可以在本地存储用户的浏览数据。

    早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据,而不影响网站的性能

    主要分为两种 sessionStorage会话存储&localStorage本地存储

    先来介绍下sessionStorage会话存储

    会话级存存储 浏览器到浏览器之间产生数据–key-value,当会话结束时,会话级数据消失

    //查看对象 window.sessionStorage

    可以看到sessionStorage是个全局对象

    //存储 sessionStoraget[key] = 'value'; //读取 var value = sessionStoryaget[key]; // 获取数据的个数 sessionStorage.length // 删除一个数据 sessionStorage.removeItem('key'); // 清除所有的数据 sessionStorage.clear();

    sessionStorage的特点

    sessionStorage 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。sessionStorage在浏览器关闭以后会自己清除掉sessionStorage它不能跨普通的页面,也不能跨域

    localStorage本地存储 跨会话级存储/本地存储 在客户端文件系统/硬盘中存储客户端与服务器间的访问数据 --> key-value对形式,即使浏览器关闭,甚至计算机关闭,数据仍然存在

    // 存储一个数据 localStorage[key] ='value'; localStorage.setItem('key','value'); // 读取一个数据 var value = localStorage[key]; localStorage.getItem('key'); // 获取数据的个数 localStorage.length // 删除一个数据 localStorage.removeItem('key'); // 清除所有的数据 localStorage.clear();

    localStorage的优势

    1、localStorage拓展了cookie的4K限制

    2、localStorage会可以将第一次请求的数据直接存储到本地,这个相当于一个5M大小的针对于前端页面的数据库,相比于cookie可以节约带宽,但是这个却是只有在高版本的浏览器中才支持的

    localStorage的局限

    1、浏览器的大小不统一,并且在IE8以上的IE版本才支持localStorage这个属性

    2、目前所有的浏览器中都会把localStorage的值类型限定为string类型,这个在对我们日常比较常见的JSON对象类型需要一些转换

    3、localStorage在浏览器的隐私模式下面是不可读取的

    4、localStorage本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡

    5、localStorage不能被爬虫抓取到

    localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储,而sessionStorage属于当会话结束的时候,sessionStorage中的键值对会被清空

    Processed: 0.015, SQL: 8