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

最新推荐文章于 2021-09-29 19:08:23 发布

置顶

前端大师

最新推荐文章于 2021-09-29 19:08:23 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端学习文章标签： JavaScript localStorage

本文链接：https://blog.youkuaiyun.com/qq_37016677/article/details/88858057

本文介绍了HTML5中的localStorage特性，它提供了5M的本地存储空间，比cookie的4kb大幅提升。接着，文章详细讲解了如何判断浏览器是否支持localStorage，以及如何进行数据的写入操作。重点在于通过localStorage实现购物车功能，包括商品的增删改查等核心功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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("("+_stora