网络存储简述

HTML 中，为了在本机存储用户数据，通常使用 JavaScript cookie。HTML 5 开始引入了 Web 存储，网站利用它在本机上存储用户数据。
cookie中每条cookie的存储空间为4k，localStorage 中一般浏览器支持的是5M大小
与 Cookie 相比，Web 存储的优点是：
◈ 更安全
◈ 更快
◈ 能存储更多的数据
有两种类型的 Web 存储对象：
☉ localStorage(本地存储) ----- 存储没有到期日期的数据，即永久存储。
☉ sessionStorage(会话存储) ----- 仅存储一个会话的数据，临时存储。
本文主要讲解lcoalStorage本地存储

localStorage 优势

localStorage 拓展了 cookie 的 4K大小限制
localStorage 可以将第一次请求的数据直接存储到本地，相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，现在主流浏览器高版本基本都是支持的
采用key-value方式进行存储，类似Java的map，当key重复时会直接覆盖

localStorage 局限

目前所有的浏览器中都会把 localStorage 的值类型限定为string类型，通常需要使用 JavaScript 函数（如 parseInt() 和 parseFloat()）进行转换，以及JSON转换
localStorage 在浏览器的隐私模式下不可读取
浏览器如果清理了缓存，那么localstorage保存的数据库也就不复存在了

localStorage 操作

存储数据

注意事项：无论存储的值之前是什么类型，如数字、json、数组等等，存储之后，都会是字符串类型
当存储的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>

读取数据

对应着存值的三种方式，取值也有三种，分别如下所示，取出来的都是字符串类型，数字、数组、json必须要转
因为上面已经存储过值了，所以下面可以直接取值即可
取值不存在时，返回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>

移除数据

移除某个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>

移除所有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>

单独获取key

可以使用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 转换

虽然不属于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>

浏览器清理缓存

<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>

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

Html 5网络存储之 LocalStorage

网络存储简述

localStorage 优势

localStorage 局限

localStorage 操作

存储数据

读取数据

移除数据

单独获取key

JSON 转换

浏览器清理缓存

猜你喜欢

Html 5网络存储之 LocalStorage

网络存储 简述

localStorage 优势

localStorage 局限

localStorage 操作

存储数据

读取数据

移除数据

单独获取key

JSON 转换

浏览器清理缓存

猜你喜欢

网络存储简述