HTML5 web存储

xiaoxiao2021-02-28  88

cookie:

特点:通过键值对的形式存储数据。

在本地浏览器上存储数据。

有效期:未来的时间(expires)

存储数据的容量:4kb

所有的http请求都会带上cookie信息,(联想HTTP)

 

(1)localStorage

用法:

1、保存数据:setItem:(key,value):有两个参数,第一个参数存储数据的键名,第二个参数存储数据的值。

localStorage.setItem("user",username);

2、删除数据:根据指定键名删除数据。

localStorage.removeItem("user");//删除指定的key的内容

清除数据:清除所有存储在localStorage的数据。

localStorage.clear();//删除所有的key的内容

 

3、获取数据:只有一个参数,该参数是获取数据的键名

localStorage.getItem("age");

注意点:key写具体的时候,要加””.

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

(2)sessionStorage

用法和localStorage一样,不同的是:sessionStorage存储数据的有效期仅对当前的浏览器(页面)有效,一旦关闭,之前存储的内容就没有了。

(3)存储对象

JSON.parse():将字符串转成对象

JSON.stringify();将对象转成字符串

解决问题:

(1)localStorage/sessionStorage存数据

需要存储的对象→字符串 JSON.stringify();

存储该字符串

var information = new Object(); information.user= username; information.age=age; //将对象转换成字符串 var str = JSON.stringify(information); localStorage stringify ("message",str);

 

(2)localStorage/sessionStorage:读数据

         读取该字符串

         读取的字符串→对象JSON.stringify();

Storage:只能存储字符串,不能存储对象或数组,如果要存储的话,需要经过转化,可以通过JSON对象中的string()将对象转化成字符串,然后,进行存储。同样的也可以通过JSON对象中的parse()将对象进行解析。

存储对比:

特性

Cookie

Localstorage

sessionStorage

生命周期

根据设置的时间

除非被删除,否则永远存在

浏览器一关闭,就不存在了

存储容量

<4kb

5Mb

和服务器通讯(http)

每次请求都会带上cookie

只保存在浏览器,和服务器没有半毛钱关系。

实用性

接口不大友好(参数需要自己拼接)

接口还可以接受吧,对于object、array等类型的数据存储比较麻烦。

 

转载请注明原文地址: https://www.6miu.com/read-51010.html

最新回复(0)