JS中的本地存储

关注

原创最新推荐文章于 2026-04-21 12:14:44 发布 5.1k 阅读 AI 写同款· GEO 优化 ›

JS之8个JavaScript库可更好地处理本地存储 https://github.com/krasimir/lsbridge如果你必须在同一个浏览器中从一个标签页发送消息到另一个标签页，你不必用艰难的方式。Local storage bridge在这里让任务变得更简单。基本使用： Basil.js Basil.js统一了session、localStorage和cookie，为你提供了一种处理数据的直接方法。基本使用： store.js https://github.com/marcuswestin/store.jsStore.js像其他东西一样处理数据存储阅读详情

在客户端运行的JS是不能操作用户电脑磁盘中的文件的（保护客户端运行的安全）

JS中的本地存储：

使用JS向浏览器的某一个位置中存储一些内容，浏览器及时关闭了，存储的信息也不会销毁，当再重新打开浏览器的时候，我们依然可以获取到上一次存储的信息

本地存储和缓存是不一样的，本地存储有本地存储的点，缓存有缓存的点。记住用户名密码，购物车等就属于本地存储

本地存储方案：

传统：

1.cookie：把信息存储到客户端的浏览器中（但是项目服务器端也是可以获取cookie的）

2.session：吧信息存储到服务器上，不属于本地存储，属于服务器存储

HTML5：webStorage

1.localStorage：永久存储到客户端本地

2.sessionStorage：信息的会话存储，会话窗口存在信息也存在，会话窗口关闭信息就消失

商品加入购物车的过程：

①先将当前用户加入购物车的这条信息存到本地cookie一份

②再存到服务器中的session中一份

③再存到服务器的数据库中一份

不仅存了当前这条购物车信息之外，还存了客户端的IP地址，如果登录了还需要记录用户账号

好处：实现多设备之间，同一个账号能够一起购买

cookie的操作

存储：document.cookie = "age=7"

获取：document.cookie

document.cookie = "age=7";
console.log(document.cookie);     //age=7

如果想要获取cookie中某个参数的值，就需要编写JS进行正则匹配

cookie.js

var cookieRender = (function(){
    //设置，expires过期时间，path路径，domain当前的一个域
    function setValue(options){
        var _default = {
            name: null,
            value: null,
            expires: new Date(new Date().getTime() + (1000 * 60 * 60 * 24)),
            path: '/',
            domain: ''
        };
        for (var key in options) {
            if(options.hasOwnProperty(key)){
                _default[key] = options[key];
            }
        }
        document.cookie = _default.name + "=" + escape(_default.value) + 
            ";expires=" + _default.expires.toGMTString() + 
            ";path=" + _default.path + ";domain=" + _default.domain;
    }
    //获取，正则匹配
    function getValue(name){
        var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
        if (arr != null) {
            return unescape(arr[2]);
        }
        return null;
    }
    //删除:原理就是让过期时间变成一个今天日期之前的
    function removeValue(options){
        var _default = {
            name: null,
            path: '/',
            domain: ''
        };
        for (var key in options) {
            if(options.hasOwnProperty(key)){
                _default[key] = options[key];
            }
        }
        if (getValue(_default.name)) {
            document.cookie = _default.name + "= ; path=" + _default.path  +"; domain="
             + _default.domain + ";expires=Fri, 02-Jan-1970 00:00:00 GMT";
        }
    }

    return {
        set: setValue,
        get: getValue,
        remove: removeValue
    }
})();

使用cookie存储

<script type="text/javascript" src="js/cookie.js"></script>
<script type="text/javascript">
	cookieRender.set({
		name: 'age',
		value: 7
	});
	console.log(cookieRender.get("age"));   //7
</script>

escape && unescape 可以对中文的字符串进行编码和解码，防止传递存储过程中出现乱码

<script type="text/javascript">
		var str = "前端知识";
		var n = escape(str);
		console.log(n);        //%u524D%u7AEF%u77E5%u8BC6
		var m = unescape(n);
		console.log(m);        //前端知识
</script>

除此之外，还有encodeURI() && decodeURI() ， encodeURIComponent() && decodeURIComponent()

localStorage的操作

存储：localStorage.setItem([key],[value]) => 向客户端本地存储一条记录，存储的[value]需要是字符串格式的，如果编写的不是字符串，浏览器会默认转换成字符串然后再进行存储，同源下存储的[key]是不会重复的，如果之前有的话，是把存储的信息重复的进行修改

获取：localStorage.getItem([key]) => 获取之前存储的值

移除：localStorage.removeItem([key]) => 移除key存储的值

都移除：localStorage.clear() => 把当前源下所有存储记录都移除掉

条数：localStorage.length() => 获取存储的记录条数 => '1'

索引值：localStorage.key(0) => 获取索引为0的一项的key值是什么 => ‘age’

localStorage.setItem('age',7);                                  
    localStorage.getItem('age');   //   得到的是字符串类型的 ‘7’  
    localStorage.setItem('age',{zhufeng：‘珠峰’});          
    localStorage.getItem('age');    //   [Object,Object]    
    localStorage.setItem('age',  JSON.stringify({"zhufeng"："珠峰"}));          
    localStorage.getItem('age');    //   {"zhufeng"："珠峰"}

数组 toString()是转换成字符串

对象 toString()是不仅仅是转换字符串，而且是用来检测数据类型的

sessionStorage的操作

存储：sessionStorage.setItem([key],[value])

获取：sessionStorage.getItem([key])

移除：sessionStorage.removeItem([key])

都移除：sessionStorage.clear()

条数：sessionStorage.length()

索引值：sessionStorage.key(0)

localStorage和sessionStorage的区别

localStorage => 属于永久存储到本地，不管是刷新页面还是关闭浏览器，存户的内容都不会消失，只有我们自己手动删除才会消失（①在控制台resource里面找到对象摁住delete，②使用JS里面的removeItem([key]) 或者clear()方法来清除），不管是杀毒软件还是浏览器自带的清除历史记录的功能，都不能把localstorage存储的内容移除掉

sessionStorage => 属于临时会话存储，只要当前的页面不关闭，信息就可以存储下来，但是页面一旦关闭，存储的信息就会自带清除（F5刷新页面只是把当前的DOM结构等进行重新的渲染，会话并没有关闭）