HTML 5 Web 存储——localStorage 和 sessionStorage

最新推荐文章于 2022-05-20 18:44:16 发布

MrShyZhang

最新推荐文章于 2022-05-20 18:44:16 发布

阅读量232

点赞数

分类专栏： HTML5 文章标签： HTML5 localStorage sessionStorage

本文链接：https://blog.csdn.net/thunderevil35/article/details/80636282

版权

HTML5 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

对浏览器来说，使用 Web Storage 存储键值对比存储 Cookie 方式更直观，而且容量更大，它包含两种：localStorage 和 sessionStorage

sessionStorage（临时存储）：为每一个数据源维持一个存储区域，在浏览器打开期间存在，包括页面重新加载,关闭浏览器页面就没有了

localStorage（长期存储）：与 sessionStorage 一样，但是浏览器关闭后，数据依然会一直存在

localStorage

在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用，永久

sessionStorage

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

localStorage 和 sessionStorage 的用法：(一样)

1. 保存数据到Storage 以字符串形式存储数据

localStorage.setItem(key,value)

sessionStorage .setItem(key,value)

注：存储的数据是一个对象会自动调用 toString（）方法

如：数组: [1, 2, 3, 4, 5].toString() => 1, 2, 3, 4, 5

对象: {}.toString() => [object Object]

2. 从Storage获取数据返回值是字符串形式

localStorage.getItem(key)

sessionStorage.getItem(key)

3. 删除Storage中的某个保存的数据

localStorage.removeItem(key)

sessionStorage.removeItem(key)

4. 删除Storage中所有保存的数据

localStorage.clear( )

sessionStorage.clear( )

5. 监听本地存储的变化

Storage 发生变化（增加、更新、删除）时的触发，同一个页面发生的改变不会触发，只会监听同一域名下其他页面改变 Storage

   window.addEventListener('storage', function (e) {
        console.log('key', e.key);
        console.log('oldValue', e.oldValue);
        console.log('newValue', e.newValue);
        console.log('url', e.url);
    })

使用localStorage保存数据一般以对象的形式进行保存，但是localStorage保存数据和获取数据都是字符串形式，所以这时候需要使用JSON.parse() 和 JSON.stringify()

if(!window.localStorage){
      alert("浏览器支持localstorage");
}else{
      var storage=window.localStorage;
      var data={
                name:'xiecanyong',
                sex:'man',
                hobby:'program'
      };
      var d=JSON.stringify(data);
      storage.setItem("data",d);
      console.log(storage.data);
}

var storage=window.localStorage;
var data={
      name:'xiecanyong',
      sex:'man',
      hobby:'program'
};
var d=JSON.stringify(data);
storage.setItem("data",d);
//将JSON字符串转换成为JSON对象输出
var json=storage.getItem("data");
var jsonObj=JSON.parse(json);
console.log(typeof jsonObj);

localStorage的优势

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

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

localStorage的局限

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

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

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

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

5、localStorage不能被爬虫抓取到