实例以及详解localStorage进行本地存储

最新推荐文章于 2025-06-09 22:40:40 发布

kingrome2009

最新推荐文章于 2025-06-09 22:40:40 发布

阅读量7.2k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： jquery 文章标签：存储

本文链接：https://blog.youkuaiyun.com/kingrome2017/article/details/75585968

jquery 专栏收录该内容

10 篇文章

订阅专栏

本文介绍localStorage的基本用法，包括存储和读取复杂数据类型的技巧，并通过两个实例演示如何在网页应用中利用localStorage来缓存文件内容及用户设置。

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

localStorage的使用方法

localStorage的方法非常简单，就是基本的增删查

几点注意

存储在 localStorage 里面的数据没有过期时间（expiration time），而存储在 sessionStorage 里面的数据会在浏览器会话（browsing session）结束时被清除，即浏览器关闭时。

无论是 localStorage 还是 sessionStorage 中保存的数据都仅限于该页面的协议。

*浏览器对localStorage的大小限制是*5MB（每个来源），比cookie的大了不少，基本可以满足日常需求了。

localStorage只能存储字符串，非字符串的数据在存储之前会被转换成字符串。所以在存储一些复杂数据类型时可能有些麻烦，通常的做法是先使用JSON.stringfy()方法将其转换为字符串后存储，使用时取出后再使用JSON.parse()方法进行还原。

// 存储用户信息 
var user = {
  name: 'John',
  id: '321456',
  isVIP: true,
  arr: [3,2,1],
};
var str = JSON.stringfy(user);
localStorage.setItem('userInfo', str);
// 提取用户信息
var infoStr = localStorage.getItem('userInfo');
var info = JSON.parse(infoStr);

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0">
    <title>FileReader</title>
</head>
<body>
    <div id="file-div">
        <input type="file" name="inputfile" accept="text/plain, text/css, text/html, text/javascript, text/markdown" />
        <textarea name="filereader" placeholder="请选择txt、js、css或html文件，文件内容会被自动读取"></textarea>
        <button type="button" name="storebutton">本地存储</button>
        <button type="button" name="clearbutton">清除存储</button>
    </div>
    <script>
        window.onload = function(){
            var text = document.getElementsByName('filereader')[0],
                inputFile = document.getElementsByName('inputfile')[0],
                storeButton = document.getElementsByName('storebutton')[0],
                clearButton = document.getElementsByName('clearbutton')[0];
            // 检测localStorage中是否已有缓存
            if(window.localStorage.getItem('textareaStorage')) {
                alert('检测到本地存储的文件，已为您自动恢复');
                text.value = window.localStorage.getItem('textareaStorage');
            }

             //上传文件
            inputFile.onchange = function(){
                console.log(this.files);
                var reader = new FileReader();
                reader.readAsText(this.files[0], 'UTF-8');
                reader.onload = function (e) {
                    // urlData就是对应的文件内容
                    var urlData = this.result;
                    text.value = urlData;
                };
            };

             // 存储文件
            storeButton.onclick = function(){
                window.localStorage.setItem('textareaStorage', text.value);
                alert('保存成功');
            };

             // 清除存储
            clearButton.onclick = function(){
                window.localStorage.removeItem('textareaStorage');
                alert('清除成功');
            };
        };
    </script>
</body>
</html>

store.js

store.js 是一个兼容所有浏览器的 LocalStorage 包装器，不需要借助 Cookie 或者 Flash来实现。它提供非常了简洁的 API 来实现跨浏览器的本地存储功能。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0">
    <title>缓存</title>
    <script src="js/jquery-1.8.2.min.js"></script>
    <script src="js/store.min.js"></script>
</head>
<body>
    <p id="p">缓存</p>
    <script>
        init();
        function init(){
            if(!store.enabled){
                alert("你的浏览器不支持本地存储，请使用更高版本的浏览器");
                return;
            }else{
                store.set('name','mavis');
                store.set('user',{name:'mavis',likes:'javascript'})
                if(store.get('name')){
                 alert('检测到本地存储的文件，已为您自动恢复');
                 $('#p').html(store.get('name'))
                }
                var user = store.get('user'); // 获取存储的对象 - 自动执行 JSON.parse
                store.forEach(function(key, val) {
                    console.log(key, '==', val)
                })  //
            }
        }
    </script>    
</body>
</html>