Html 5 网络存储之 LocalStorage，SessionStorage，Cookie

蚩尤后裔-汪茂雄

已于 2024-01-25 10:55:25 修改

阅读量2.8k

点赞数 2

分类专栏： Html 5 JavaScript 文章标签： html javascript 前端

于 2018-06-26 09:25:13 首次发布

本文链接：https://blog.csdn.net/wangmx1993328/article/details/80810413/

版权

JavaScript 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

Html 5

13 篇文章 0 订阅

订阅专栏

菜鸟教程：Window localStorage 属性 | 菜鸟教程。

网络存储简述

1、HTML 中，为了在本机存储用户数据，通常使用 JavaScript cookie。HTML 5 开始引入了 Web 存储，网站利用它在本机上存储用户数据。

2、cookie中每条cookie的存储空间为4k，localStorage 中一般浏览器支持的是5M大小

3、与 Cookie 相比，Web 存储的优点是：◈ 更安全 ◈ 更快 ◈ 能存储更多的数据

4、有两种类型的 Web 存储对象：
☉ localStorage(本地存储) ----- 存储没有到期日期的数据，即永久存储。
☉ sessionStorage(会话存储) ----- 仅存储一个会话的数据，临时存储。

5、不同浏览器无法共享 localStorage 或 sessionStorage 中的数据。相同浏览器中同一个目标服务器下的所有应用的页面间可以共享 localStorage数据，不同页面或标签页间无法共享sessionStorage的信息。

JavaScript Cookie

1、Cookie 的作用就是用于解决 "如何记录客户端的用户信息"，存储于用户电脑上的文本文件中。

当用户访问 web 页面时，他的名字可以记录在 cookie 中。

在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。

2、Cookie 以key-value对形式存储，如：username=John Doe

3、当浏览器从服务器上请求 web 页面时，属于该页面的 cookie 会被添加到该请求中，服务端通过这种方式来获取用户的信息。

4、前端、后端都可以单独的操作 Cookie，对其进行增删改查。

5、JavaScript 可以使用 document.cookie 属性来创建、读取、及删除 cookie。

创建Cookie	// expires：默认cookie 在浏览器关闭时自动删除，添加过期时间(以 UTC 或 GMT 时间)后，关闭重开浏览器仍然会在。 // path：默认 cookie 属于当前页面，可以告诉浏览器 cookie 的生效路径，如 / 表示整个网站下全部页面共享。 document.cookie="username=LiSi; expires=Sun, 05 Feb 2043 01:22:46 GMT; path=/";
读取 Cookie	var x = document.cookie; // 将以字符串的方式返回所有的 cookie，比如："cookie1=value; cookie2=value; cookie3=value";用分号隔开，分号前面还会有一个空格。 // 不存在时返回空字符串，无论存进去的是什么类型，取出来的都是字符串类型。
修改 Cookie	修改 cookie 等同于于创建 cookie，当 key 存在时自动覆盖，不存在时自动新增。
删除 Cookie	// 删除 cookie 非常简单,只需要为 key 设置的 expires 过期时间小于等于当前时间即自动删除。 // 删除时可以不必指定 cookie 的值。 document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

 /**
     * 设置 cookie 值
     * @param key
     * @param value
     * @param exDays ：过期时间，单位天，0 或负数表示删除。
     */
    function setCookie(key, value, exDays) {
        let nowDate = new Date();
        nowDate.setTime(nowDate.getTime() + (exDays * 24 * 60 * 60 * 1000));
        let expires = "expires=" + nowDate.toUTCString();
        document.cookie = key + "=" + value + "; " + expires;
    }
    /**
     * 获取 Cookie 的值
     * @param key
     * @returns {string}，没有查到时，返回空字符串。
     */
    function getCookie(key) {
        let name = key + "=";
        let cookieArr = document.cookie.split(';');
        for (let i = 0; i < cookieArr.length; i++) {
            let nameValue = cookieArr[i].trim();
            if (nameValue.indexOf(name) == 0) {
                return nameValue.substring(name.length, nameValue.length);
            }
        }
        return "";
    }

localStorage 本地存储

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

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

3、采用key-value方式进行存储，类似Java的map，当key重复时会直接覆盖

4、目前所有的浏览器中都会把 localStorage 的值类型限定为string类型，通常需要使用 JavaScript 函数（如 parseInt() 和 parseFloat()）进行转换，以及JSON转换

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

6、浏览器如果清理了缓存，那么localstorage保存的数据库也就不复存在了

增删改查操作

存储数据

1、注意事项：无论存储的值之前是什么类型，如数字、json、数组等等，存储之后，都会是字符串类型

2、当存储的 key 已经存在时，则直接覆盖 value，类似 Java 中的 map

<script type="text/javascript">
    /**
     * 判断浏览器是否支持localStorage
     * 通常都是可以支持的
     */
    if (window.localStorage) {
        console.log("当前浏览器支持localStorage...");

        /**
         * 获取localStorage对象
         * @type {Storage}
         */
        let localStorage = window.localStorage;

        /**存值方式1 ———推荐方式*/
        localStorage["name"] = "张无忌";
        /**存值方式2 ———不推荐*/
        localStorage.age = 120;
        /**存值方式3 ———推荐方式*/
        localStorage.setItem("address","广东深圳");

    } else {
        console.log("当前浏览器不支持localStorage...");
    }
</script>

读取数据

1、对应着存值的三种方式，取值也有三种，分别如下所示，取出来的都是字符串类型，数字、数组、json 必须要转

2、因为上面已经存储过值了，所以下面可以直接取值即可

3、取值不存在时，返回 undefined 或者 null

<script type="text/javascript">
    /**
     * 判断浏览器是否支持localStorage
     * 通常都是可以支持的
     */
    if (window.localStorage) {
        console.log("当前浏览器支持localStorage...");

        /**
         * 获取localStorage对象
         * @type {Storage}
         */
        let localStorage = window.localStorage;

        /**取值方式1---推荐方式*/
        let name = localStorage["name"];
        /**取值方式2---不推荐*/
        let age = parseInt(localStorage.age);
        /**取值方式3---推荐方式*/
        let address = localStorage.getItem("address");

        console.log("name："+name);
        console.log("age："+age);
        console.log("address："+address);

    } else {
        console.log("当前浏览器不支持localStorage...");
    }
</script>

移除数据

1、移除某个 key-value，使用 removeItem(var key) 方法

<script type="text/javascript">
    /**
     * 判断浏览器是否支持localStorage
     * 通常都是可以支持的
     */
    if (window.localStorage) {
        console.log("当前浏览器支持localStorage...");
        /**
         * 获取localStorage对象
         * @type {Storage}
         */
        let localStorage = window.localStorage;

        /**存数据name*/
        localStorage.setItem("name","张无忌");
        /**取数据name*/
        let name = localStorage["name"];
        console.log("移除前 name："+name);
        /**删除数据name*/
        localStorage.removeItem("name");
        /**取数据name*/
        name = localStorage["name"];
        console.log("移除后 name："+name);
    } else {
        console.log("当前浏览器不支持localStorage...");
    }
</script>

2、移除所有key-value，使用 clear() 方法

<script type="text/javascript">
    /**
     * 判断浏览器是否支持localStorage
     * 通常都是可以支持的
     */
    if (window.localStorage) {
        console.log("当前浏览器支持localStorage...");
        /**
         * 获取localStorage对象
         * @type {Storage}
         */
        let localStorage = window.localStorage;

        /**存数据name，age*/
        localStorage.setItem("name", "张无忌-赵敏");
        localStorage.setItem("age", 110);

        /**取数据*/
        console.log("移除所有数据前 ：" + localStorage.length);
        /**删除所有数据*/
        localStorage.clear();
        /**取数据*/
        console.log("移除所有数据后 ：" + localStorage.length);
    } else {
        console.log("当前浏览器不支持localStorage...");
    }
</script>

遍历数据

1、可以使用 key(var index) 方法获取 localStorage 中的 key，再可以根据 getItem(var key) 获取key对应的值

<script type="text/javascript">
    /**
     * 判断浏览器是否支持localStorage
     * 通常都是可以支持的
     */
    if (window.localStorage) {
        console.log("当前浏览器支持localStorage...");
        /**
         * 获取localStorage对象
         * @type {Storage}
         */
        let localStorage = window.localStorage;

        /**存数据*/
        localStorage.setItem("name", "张无忌");
        localStorage.setItem("age", 110);
        localStorage.setItem("address", "广东深圳");
        let keyName = "";
        let keyValue = "";

        /**length属性可以获取大小
         * */
        for (let i = 0; i < localStorage.length; i++) {
            /**获取key以及value*/
            keyName = localStorage.key(i);
            keyValue = localStorage.getItem(keyName);
            console.log(i + "、" + keyName + " = " + keyValue);
        }
    } else {
        console.log("当前浏览器不支持localStorage...");
    }
</script>

JSON 转换

1、虽然不属于 localStorage 的内容范畴，但还是写上

<script type="text/javascript">
    /**
     * 判断浏览器是否支持localStorage
     * 通常都是可以支持的
     */
    if (window.localStorage) {
        console.log("当前浏览器支持localStorage...");
        /**随机生成新闻、视频、微博、微信 四个圆圈图数据
         * 思路：现存本地网络缓存中获取数据，有则直接使用
         * 否则根据日期就是设值*/
        var localStorageObj = window.localStorage;
        var textDataStr = localStorageObj["textDataStr"];
        var textDataJson = {};
        /**四者初始化大小*/
        var videoInitSize = 1862343;
        var newsInitSize = 20853626;
        var weiboInitSize = 7527789;
        var weChatInitSize = 1001619;

        if (textDataStr == undefined) {
            /**本地不存在时，则第一次存储到本地*/
            textDataJson = {
                "news": newsInitSize,
                "video": videoInitSize,
                "weibo": weiboInitSize,
                "weixin": weChatInitSize
            };
            /**存储的时候，不能直接存储json对象，而是要转为字符串后再存储*/
            localStorageObj["textDataStr"] = JSON.stringify(textDataJson);
            console.log("本地不存在：" + localStorageObj["textDataStr"]);
        } else {
            /** 当本地已经存在了时，直接操作本地数据
             * 取出来的只是普通字符串，所以要转为json*/
            textDataJson = JSON.parse(textDataStr);
            newsInitSize = textDataJson["news"];
            videoInitSize = textDataJson["video"];
            weiboInitSize = textDataJson["weibo"];
            weChatInitSize = textDataJson["weixin"];
            console.log("本地已经存在：" + JSON.stringify(textDataJson));
        }
    } else {
        console.log("当前浏览器不支持localStorage...");
    }
</script>

浏览器清理缓存

1、浏览器清理缓存后，数据就没有了：

<script type="text/javascript">
    /**
     * 判断浏览器是否支持localStorage
     * 通常都是可以支持的
     */
    if (window.localStorage) {
        console.log("当前浏览器支持localStorage...");
        var localStorageObj = window.localStorage;
        var textDataStr = localStorageObj["textDataStr"];
        console.log("xx："+textDataStr);
    } else {
        console.log("当前浏览器不支持localStorage...");
    }
</script>

2、浏览器清理缓存前，取值是OK的，现在对着Chrome浏览器按快捷键 "Ctrl+Shift+Delete"：

SessionStorage 会话存储

1、SessionStorage 是HTML5新增的一个会话存储对象，用于临时保存同一窗口(标签页)的数据，在关闭窗口或标签页之后将会删除这些数据

2、在JavaScript语言中可通过 window.sessionStorage 或 sessionStorage 调用此对象。完全类似localStorage对象的获取
seesionStorage 与 localStorage 一样采用key-value方式存储。key值相同时，新增的覆盖原有的。value值必须为字符串类型(传入非字符串，也会在存储时转换为字符串，如true值会转换为"true")。

3、sessionStorage 与 localStorage 一样，大多数浏览器把存储大小上限限制在5MB以内

4、不同浏览器无法共享 localStorage或sessionStorage中的数据。相同浏览器中同一个目标服务器下的所有应用的页面间可以共享 localStorage，不同页面或标签页间无法共享sessionStorage的信息。

5、sessionStorage 和 localStorage 使用完全相同的API，所以本文操作部分只做简要描述，详情请参考《Html 5网络存储之 LocalStorage》

sessionStorage.setItem("key","value"); //以“key”为名称存储一个值“value”,key相同时会覆盖value sessionStorage["key"] = value; //以“key”为名称存储一个值“value”,key相同时会覆盖value sessionStorage.key = value; //以“key”为名称存储一个值“value”,key相同时会覆盖value	存值
value = sessionStorage.getItem("key"); //获取“key”的value，key不存在时，返回undefined或者null value = sessionStorage["key"]; //获取“key”的value，key不存在时，返回undefined或者null value = sessionStorage.key; //获取“key”的value，key不存在时，返回undefined或者null	取值
//使用 length 属性加 getItem 方法 for(var i=0;i<sessionStorage.length;i++){ var name = sessionStorage.key(i); var value = sessionStorage.getItem(name); }	枚举
sessionStorage.removeItem("key");//删除名称为“key”的信息。 sessionStorage.clear();//清空sessionStorage中所有信息	删除

<script type="text/javascript">
    /**
     * 判断浏览器是否支持localStorage
     * 通常都是可以支持的
     */
    if (window.sessionStorage) {
        console.log("当前浏览器支持sessionStorage...");
        var sessionStorageObj = window.sessionStorage;
        sessionStorageObj.setItem("name", "张三");
        sessionStorageObj.setItem("age", 20);
 
        let name = sessionStorageObj.getItem("name");
        let age = sessionStorageObj.getItem("age");
        console.log("name：" + name + "、age:" + age);
 
        sessionStorageObj.removeItem("age");
        age = sessionStorageObj.getItem("age");
        console.log("name：" + name + "、age:" + age);
 
        sessionStorageObj.clear();
        name = sessionStorageObj.getItem("name");
        age = sessionStorageObj.getItem("age");
        console.log("name：" + name + "、age:" + age);
 
    } else {
        console.log("当前浏览器不支持sessionStorage...");
    }
</script>

蚩尤后裔-汪茂雄

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
1
评论
Html 5 网络存储之 LocalStorage，SessionStorage，Cookie

目录网络存储简述localStorage 本地存储增删改查操作JSON 转换浏览器清理缓存SessionStorage 会话存储SessionStorage 操作网络存储简述1、HTML 中，为了在本机存储用户数据，通常使用 JavaScript cookie。HTML 5 开始引入了 Web 存储，网站利用它在本机上存储用户数据。2、cookie中每条...
复制链接

扫一扫