localstorage 和 sessionstorage 的区别和用法

localstorage 和 sessionstorage 的区别和用法

localStorage的浏览器支持情况：

1：生存期

1、localSorage：**理论上是永久有效的，不清空就不会消失**，即时保存的数据超出了浏览器所规定的大小，也不会把旧的数据清空，而是只会报错。移动设备上的浏览器或者Native App用到的WebView里，localStorage都是不可靠的，可能会被各种原因清空

2、sessionStorage:**只要关闭浏览器就会被清空**，由于sessionStorage的生存周期太短，因此应用场景很有限，但是从另一方面来看，不容易出现异常状况，比较可靠

2：作用域

1、localSorage：允许在相同协议，相同主机名，端口外就能修改同一份localSorage数据

2、sessionStorage:除了以上要求，还需要在同一窗口下。

方法：

1：setItem()

Storage.setItem()方法用于存入数据。它接受两个参数，第一个是键名，第二个是保存的数据。如果键名已经存在，该方法会更新已有的键值。该方法没有返回值。两个参数都是字符串。如果不是字符串，会自动转成字符串，再存入浏览器。

window.sessionStorage.setItem('key', 'value');

window.localStorage.setItem('key', 'value');

如果储存空间已满，该方法会抛错。

写入不一定要用这个方法，直接赋值也是可以的。

// 下面三种写法等价

window.localStorage.foo = '123';

window.localStorage['foo'] = '123';

window.localStorage.setItem('foo', '123');

2：getItem()

Storage.getItem() 方法用于读取数据。它只有一个参数，就是键名。如果键名不存在，该方法返回 null。键名应该是一个字符串，否则会被自动转为字符串。

window.sessionStorage.getItem('key')

window.localStorage.getItem('key')

3：removeItem()

Storage.removeItem() 方法用于清除某个键名对应的键值。它接受键名作为参数，如果键名不存在，该方法不会做任何事情。该方法的返回值是 undefined。

sessionStorage.removeItem('key');

localStorage.removeItem('key');

4：clear()

Storage.clear() 方法用于清除所有保存的数据。该方法的返回值是 undefined。

window.sessionStorage.clear()

window.localStorage.clear()

5：key()

Storage.key() 接受一个整数作为参数（从零开始），返回该位置对应的键名.

window.sessionStorage.setItem('key', 'value');

window.sessionStorage.key(0) // "key"

结合使用 Storage.length 属性和 Storage.key() 方法，可以遍历所有的键。

for (let i = 0; i < localStorage.length; i++) {
  let key = localStorage.key(i);
  console.log(key,localStorage.getItem(key));
}

使用方法：

增

/*value会被调用 .toString方法转化成字符串。因此，如果要储存的对象，
调用JSON.stringify(obj)来序列化成字符串
*/
//官网推荐使用setItem()
localStorage.setItem('key', 'value');

localStorage.key = "value"
localStorage["key"] = "value"

删

localStorage.removeItem('key');//删除某一个localStorage
localStorage.clear();//清空所有localStorage
delete localStorage.key

改

//官网推荐使用setItem()
localStorage.setItem('key', 'value');

localStorage.key = "value"

查

//官网推荐使用getItem()
localStorage.getItem('key');

localStorage.key
localStorage["key"]
localStorage.key(index);//localStorage数组中下标是index的key,类数组。

实例（以localStorage为例，sessionStorage相同）：

//保存
 
const info = { name:'hou', age: 24, id: '001' }
const str="haha"
localStorage.setItem('hou', JSON.stringify(info))
localStorage.setItem('zheng', str)

2 获取
var data1 = JSON.parse(localStorage.getItem('hou'))
var data2 = localStorage.getItem('zheng')
 
3 删除
//删除某个
localStorage.removeItem('hou')
//删除所有
localStorage.clear()
 
4 监听
/**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);
})

来源：
https://blog.csdn.net/qq_39834073/article/details/107834213
https://blog.csdn.net/weixin_43974265/article/details/113871171