Storage、Cookies(Browser对象)

localStorage

特点

1. 只读
2. 允许存储键值对的数据。
3. 长期保存网站数据，没有过期时间，直到手动删除
4. localStorage将第一次请求的数据直接存储到本地，相当于一个5M大小的针对前端的页面数据库，相比于 cookie 可以节约带宽。

局限

1. localStorage的数据类型默认为String，用到JSON时需要进行转换。
2. localStorage本质上是对字符串的读取，内容过多会消耗内存空间，导致页面变卡。
3. localStorage不能被爬虫抓取到。
4. localStorage在浏览器的隐私模式下不可读取。

使用之前确保该浏览器支持localStorage属性

if(! window.localStorage){
    alert("浏览器不支持localstorage");
    return false;
}else{
    //主逻辑业务
}

创建对象

var storage=window.localStorage;

保存数据语法

localStorage.setItem("key", "value");

读取数据语法

var lastname = localStorage.getItem("key");

删除数据语法

localStorage.removeItem("key");  //删除某个键值对
storage.clear();  //清除所有内容

其他

与JSON之间的转换

• 将JSON对象存入localStorage中后，会变自动转为String类型的数据，可以用JSON.stringify()将 JSON 转换成为 JSON 字符串。

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);
    <!--localStorage.setItem("data", JSON.stringify(data));-->
    console.log(storage.data);
}

• 读取之后再用JSON.parse()将JSON字符串转为JSON对象。

var storage=window.localStorage;
var data={
    name:'xiecanyong',
    sex:'man',
    hobby:'program'
};
var d=JSON.stringify(data);
storage.setItem("data",d);

var json=storage.getItem("data");
var jsonObj=JSON.parse(json);  //换成JSON对象
// var data = localStorage.getItem("data");
// data = JSON.parse(data);
console.log(typeof jsonObj);

---

sessionStorage

• 允许保存键值对数据
• 数据只保存在当前会话中，关闭窗口或标签页之后自动删除数据

创建对象

var storage=window.sessionStorage;

保存数据

sessionStorage.setItem("key", "value");

读取数据

var data = sessionStorage.getItem("key");

删除数据

sessionStorage.removeItem("key");  //删除指定键值对
sessionStorage.clear();            //删除所有数据

---

Cookies

以键值对的方式保存用户信息，当浏览器从服务器请求一个网页时，属于该页的cookie就会添加到该请求中，服务器以此获取用户数据。

特点：

1. 有时效性

创建cookie：

document.cookie = "username=Bill Gates";

添加有效日期（UTC时间）：

默认在浏览器关闭时删除cookie

document.cookie = "username=John Doe; expires=Sun, 31 Dec 2017 12:00:00 UTC";

设置路径path：

默认属于当前页

document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";

读取cookie：

会在一条字符串中返回所有的cookie

let x = document.cookie;

修改cookie：

覆盖旧的cookie

document.cookie = "username=Steve Jobs; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";

删除cookie：

删除时不用指定cookie值，只需要把expires参数设置为过去的时间即可

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

标签：Cookies,Storage,00,JSON,localStorage,var,cookie,data,Browser
来源： https://www.cnblogs.com/arica/p/16490291.html