JavaScript基础之localStorage以及简单实现购物车功能

忘是亡心i 2022-02-27 14:54 404阅读 0赞

--------------------

# 1.localStorage是什么 #

--------------------

*  localStorage是HTML5里新加入的新特性，这个是作为一种本地存储功能来使用的，解决了cookit只有4kb的存储空间导致空间不足的问题，在浏览器当中localStorage的大小一般为5M，当然在不同的浏览器当中大小也不同。

## 2.判断浏览器是否支持localStorage ##

if (window.localStorage) {
        //执行代码
    }else{
        return false;
    }

## 3.localStorage的写入 ##

var storage = window.localStorage
    storage.setItem("key","value")
    storage["key"] = value;
    storage.key = "value"

## 4.购物车功能的实现 ##

1.实现购物车的“增删改查”功能  
\------------------------------封装---------------------

class Cart{
        constructor(){
            this.storage = {};
        }
        //检测浏览器是否支持locastorage和变量的初始化
        comn(){
            let _storage;
            if (window.localStorage) {
                if (window.localStorage["Cart"]) {
                    _storage = window.localStorage["Cart"];
                    _storage = eval("("+_storage+")");
                    for (let key in _storage) {
                    _storage[key] = this.storage[key];
                    }
                }
                return true;
            }
            return false;
        }
        //保存
        save(){
            let _storage = "{";
            for (var key in this.storage) {
                _storage = key + ":" + this.storage[key] + ",";
            }
            _storage = _storage.replace(/,$/g,"") + "}";
            window.localStorage.setItem(_storage);
        }
    
        //添加数量
        add(id,number){
            if (this.comn()) {
                if (number) {
                   this.storage[id] = number;
                }else{
                    if (this.storage[id] = id) {
                        this.storage[id]++;
                    }else{
                        this.storage[id] = 1;
                    }
                }
            }
            this.save();
        }
    
        // 删除指定的商品
        detale(id){
            if (this.comn) {
                delete this.storage[id]
            }
            this.save()
        }
        // 统计所有的数量
        count(){
            if (this.comn()) {
                var sum = 0;
                _storage = eval("("+this.storage+")");
                for (var key in _storage) {
                    sum += _storage[key]
                }
                return sum
            }
            this.save()
        }
    
        // 减少商品的数量
    
        reduce(id,number){
            if (this.comn()) {
                if (this.storage[id]>number) {
                    this.storage[id] = this.storage[id] - number;
                }else{
                    delete this.storage[id];
                }
                this.save()
            }
        }
    }