Table of Contents
Use JS to implement front-end caching
Home Web Front-end JS Tutorial Implement front-end caching using JS

Implement front-end caching using JS

Sep 21, 2017 am 10:01 AM
javascript front end cache

Use JS to implement front-end caching


In the front-end browser, some data (such as data in the data dictionary) can be retrieved in the first request Come over and save it in a js object, so you don’t have to request the server every time you need it in the future. For pages that heavily use data dictionaries to populate drop-down boxes, this approach can greatly reduce server visits. This method works especially well with frames using iframes.

Specific implementation ideas and methods:

Create a cache.js file:

1. Front-end page, define which data needs to be obtained from the front-end cache at one time, and define an object To save this data:

/**
 * 定义需要在用户登录的时候获取到本地的数据字典类别 */var clsCodes = {clsCodes :
        [BOOL,
         STATUS,
         USER_TYPE,
         REPORT_STATUS
     ]
}; 
/**
 * 获取数据字典到本地 */var dicts;
Copy after login

2. For the front-end page, define a function to call the back-end interface to obtain the data, and then save it to the local cache object (dicts).

function getDicts() {
    $.post(getContextPath() + /api/sys/getDictList,            clsCodes,            function(resultBean, status, xhRequest) {                if (resultBean.data != undefined) {
                    dicts = resultBean.data;
                }
            }, 
            'json');
}
Copy after login

Call this method when the main page is loaded to obtain the data at once and cache it. In this way, if you need the same data in the future, you can get it directly from the local object dicts.

Backend Controller:

3. Define an interface to query the database (or query the server cache, as in the following example) according to the front-end request to obtain data and return it to the front-end:

/**
 * 根据多个分类编号获取多个字典集合
 * @param clsCodes
 * @return {{clsCode : {code1:name1,code2:name2...}}, ...} */@SuppressWarnings({ unchecked, rawtypes })
@ResponseBody
@RequestMapping(getDictList)
public ResultBean getDictList(@RequestParam(value = clsCodes[], required = true) String[] clsCodes) {
    ResultBean rb = new ResultBean();
     
    Map<string, string="">> dictCache = (Map<string, string="">>) CacheManager.getInstance().get(CacheConstants.DICT);
    Map dictMap = new LinkedHashMap<>(); //使用LinkedHashMap保证顺序
 
    if(dictCache != null){        
    for(String  clsCode: clsCodes){
            dictMap.put(clsCode, dictCache.get(clsCode));
        }
    }else{
        rb.setMessage(缓存中拿不到字典信息!);
        rb.setSuccess(false);
    }
     rb.setData(dictMap);    return rb;
}</string,></string,>
Copy after login

The above is the detailed content of Implement front-end caching using JS. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to view and refresh dns cache in Linux How to view and refresh dns cache in Linux Mar 07, 2024 am 08:43 AM

DNS (DomainNameSystem) is a system used on the Internet to convert domain names into corresponding IP addresses. In Linux systems, DNS caching is a mechanism that stores the mapping relationship between domain names and IP addresses locally, which can increase the speed of domain name resolution and reduce the burden on the DNS server. DNS caching allows the system to quickly retrieve the IP address when subsequently accessing the same domain name without having to issue a query request to the DNS server each time, thereby improving network performance and efficiency. This article will discuss with you how to view and refresh the DNS cache on Linux, as well as related details and sample code. Importance of DNS Caching In Linux systems, DNS caching plays a key role. its existence

PHP and Vue: a perfect pairing of front-end development tools PHP and Vue: a perfect pairing of front-end development tools Mar 16, 2024 pm 12:09 PM

PHP and Vue: a perfect pairing of front-end development tools. In today's era of rapid development of the Internet, front-end development has become increasingly important. As users have higher and higher requirements for the experience of websites and applications, front-end developers need to use more efficient and flexible tools to create responsive and interactive interfaces. As two important technologies in the field of front-end development, PHP and Vue.js can be regarded as perfect tools when paired together. This article will explore the combination of PHP and Vue, as well as detailed code examples to help readers better understand and apply these two

Advanced Usage of PHP APCu: Unlocking the Hidden Power Advanced Usage of PHP APCu: Unlocking the Hidden Power Mar 01, 2024 pm 09:10 PM

PHPAPCu (replacement of php cache) is an opcode cache and data cache module that accelerates PHP applications. Understanding its advanced features is crucial to utilizing its full potential. 1. Batch operation: APCu provides a batch operation method that can process a large number of key-value pairs at the same time. This is useful for large-scale cache clearing or updates. //Get cache keys in batches $values=apcu_fetch(["key1","key2","key3"]); //Clear cache keys in batches apcu_delete(["key1","key2","key3"]);2 .Set cache expiration time: APCu allows you to set an expiration time for cache items so that they automatically expire after a specified time.

The relationship between CPU, memory and cache is explained in detail! The relationship between CPU, memory and cache is explained in detail! Mar 07, 2024 am 08:30 AM

There is a close interaction between the CPU (central processing unit), memory (random access memory), and cache, which together form a critical component of a computer system. The coordination between them ensures the normal operation and efficient performance of the computer. As the brain of the computer, the CPU is responsible for executing various instructions and data processing; the memory is used to temporarily store data and programs, providing fast read and write access speeds; and the cache plays a buffering role, speeding up data access speed and improving The computer's CPU is the core component of the computer and is responsible for executing various instructions, arithmetic operations, and logical operations. It is called the "brain" of the computer and plays an important role in processing data and performing tasks. Memory is an important storage device in a computer.

Questions frequently asked by front-end interviewers Questions frequently asked by front-end interviewers Mar 19, 2024 pm 02:24 PM

In front-end development interviews, common questions cover a wide range of topics, including HTML/CSS basics, JavaScript basics, frameworks and libraries, project experience, algorithms and data structures, performance optimization, cross-domain requests, front-end engineering, design patterns, and new technologies and trends. . Interviewer questions are designed to assess the candidate's technical skills, project experience, and understanding of industry trends. Therefore, candidates should be fully prepared in these areas to demonstrate their abilities and expertise.

How to save video files from browser cache to local How to save video files from browser cache to local Feb 23, 2024 pm 06:45 PM

How to Export Browser Cache Videos With the rapid development of the Internet, videos have become an indispensable part of people's daily lives. When browsing the web, we often encounter video content that we want to save or share, but sometimes we cannot find the source of the video files because they may only exist in the browser's cache. So, how do you export videos from your browser cache? This article will introduce you to several common methods. First, we need to clarify a concept, namely browser cache. The browser cache is used by the browser to improve user experience.

Caching mechanism and application practice in PHP development Caching mechanism and application practice in PHP development May 09, 2024 pm 01:30 PM

In PHP development, the caching mechanism improves performance by temporarily storing frequently accessed data in memory or disk, thereby reducing the number of database accesses. Cache types mainly include memory, file and database cache. Caching can be implemented in PHP using built-in functions or third-party libraries, such as cache_get() and Memcache. Common practical applications include caching database query results to optimize query performance and caching page output to speed up rendering. The caching mechanism effectively improves website response speed, enhances user experience and reduces server load.

Spring Boot performance optimization tips: create applications as fast as the wind Spring Boot performance optimization tips: create applications as fast as the wind Feb 25, 2024 pm 01:01 PM

SpringBoot is a popular Java framework known for its ease of use and rapid development. However, as the complexity of the application increases, performance issues can become a bottleneck. In order to help you create a springBoot application as fast as the wind, this article will share some practical performance optimization tips. Optimize startup time Application startup time is one of the key factors of user experience. SpringBoot provides several ways to optimize startup time, such as using caching, reducing log output, and optimizing classpath scanning. You can do this by setting spring.main.lazy-initialization in the application.properties file

See all articles